Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <slick class="SLIDERcontainer6_maincontainer" ref="slick" :options="slickOptions">
- <div class="SLIDERcontainer6_item_container" v-for="slider in globals.producsSlider" :key="slider.title">
- <div class="SLIDERcontainer6_item_image" :style="'background-image:url('+slider.image+');'"></div>
- </div>
- </slick>
- </template>
- <!--SCRIPTS-->
- <script>
- import { mapState } from 'vuex';
- import Slick from 'vue-slick';
- export default {
- name: 'SLIDERcontainer10',
- components: { Slick },
- computed:
- {
- ...mapState('Globals',['globals'])
- },
- data()
- {
- return {
- slickOptions: {
- infinite: true,
- slidesToShow: 4,
- slidesToScroll: 1,
- prevArrow: '<i class="fa fa-chevron-left fs_bigger c_light" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
- nextArrow: '<i class="fa fa-chevron-right fs_bigger c_light" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
- arrows: true,
- autoplay: true,
- speed: 2000,
- autoplaySpeed: 4000,
- responsive:
- [
- {
- breakpoint: 1120,
- settings:
- {
- slidesToShow: 3,
- slidesToScroll: 1,
- }
- },
- {
- breakpoint: 800,
- settings:
- {
- slidesToShow: 2,
- slidesToScroll: 2
- }
- },
- {
- breakpoint: 600,
- settings:
- {
- slidesToShow: 1,
- slidesToScroll: 1
- }
- }]
- },
- };
- },
- beforeUpdate()
- {
- if (this.$refs.slick) {
- this.$refs.slick.destroy();
- }
- },
- updated()
- {
- this.$nextTick(function () {
- if (this.$refs.slick) {
- this.$refs.slick.create(this.slickOptions);
- }
- });
- },
- mounted()
- {
- console.log(this.$options.name+' component successfully mounted');
- },
- };
- </script>
- <!--STYLES-->
- <style scoped>
- .SLIDERcontainer6_maincontainer{width:100%; height:auto; position:relative;}
- .SLIDERcontainer6_item_container{width:33.33%; height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; background-color:var(--web_primary_color); position:relative;}
- .SLIDERcontainer6_item_image{width:275px; height:275px; border-radius:50%; background-size:cover; background-position:center; margin:auto; align-self:center;}
- @media only screen and (max-width: 736px)
- {
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement