{"version":3,"sources":["webpack:///./src/views/extensions/swiper/code.js"],"names":["codeDefault","codeAutoplay","codeCenterSlides","codeCenterSlides2","codeCoverflowEffect","codeCube","codeFadeEffect","codeGallery","codeLazy","codeMultipleSlides","codeMultiRowSlides","codeNavigation","codePagination","codeParallax","codeProgress","codeResponsive","codeVirtual"],"mappings":"gHAAA,6xBAAO,IAAMA,EAAc,mhCA+CdC,EAAe,8wDA8EfC,EAAmB,4/CAoEnBC,EAAoB,ssCAqDpBC,EAAsB,0yDAyEtBC,EAAW,i6CAgEXC,EAAiB,onDA0EjBC,EAAc,+5EAuGdC,EAAW,yvDA2EXC,EAAqB,m1CA6DrBC,EAAqB,wqEA6FrBC,EAAiB,k6CAgEjBC,EAAiB,mwCA2DjBC,EAAe,wgGAgGfC,EAAe,ulDAwEfC,EAAiB,0gEAmFjBC,EAAc","file":"js/chunk-2d21d867.af69a521.js","sourcesContent":["export const codeDefault = `\n<template>\n  <swiper\n    ref=\"mySwiper\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"data in swiperData\"\n      :key=\"data.img\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-13.jpg') },\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-4.jpg') },\n        { img: require('@/assets/images/banner/banner-2.jpg') },\n        { img: require('@/assets/images/banner/banner-1.jpg') },\n      ],\n      /* eslint-disable global-require */\n    }\n  },\n}\n</script>\n\n`\n\nexport const codeAutoplay = `\n<template>\n  <swiper\n    class=\"swiper-autoplay\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"data in swiperData\"\n      :key=\"data.img\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      swiperOptions: {\n        spaceBetween: 30,\n        centeredSlides: true,\n        autoplay: {\n          delay: 2500,\n          disableOnInteraction: false,\n        },\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-20.jpg') },\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-8.jpg') },\n        { img: require('@/assets/images/banner/banner-9.jpg') },\n        { img: require('@/assets/images/banner/banner-10.jpg') },\n        { img: require('@/assets/images/banner/banner-11.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n    }\n  },\n}\n</script>\n`\n\nexport const codeCenterSlides = `\n<template>\n  <swiper\n    class=\"swiper-centered-slides p-1\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n\n    <!-- slides -->\n    <swiper-slide\n      v-for=\"data in swiperData\"\n      :key=\"data.text\"\n      class=\"rounded swiper-shadow\"\n    >\n      <feather-icon\n        :icon=\"data.icon\"\n        size=\"28\"\n      />\n      <div class=\"swiper-text pt-md-1 pt-sm-50\">\n        {{ data.text }}\n      </div>\n    </swiper-slide>\n\n    <!-- Add Arrows -->\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n  },\n  data() {\n    return {\n      swiperData: [\n        { icon: 'GithubIcon', text: 'Getting Started' },\n        { icon: 'FacebookIcon', text: 'Pricing & Plans' },\n        { icon: 'TwitterIcon', text: 'Sales Question' },\n        { icon: 'InstagramIcon', text: 'Usage Guides' },\n        { icon: 'GitlabIcon', text: 'General Guide' },\n      ],\n      swiperOptions: {\n        slidesPerView: 'auto',\n        centeredSlides: true,\n        spaceBetween: 30,\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeCenterSlides2 = `\n<template>\n  <swiper\n    class=\"swiper-centered-slides-2 p-1\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n      class=\"rounded swiper-shadow py-1 px-3 d-flex\"\n    >\n      <feather-icon\n        :icon=\"data.icon\"\n        size=\"18\"\n        class=\"mr-50\"\n      />\n      <div class=\"swiper-text\">\n        {{ data.text }}\n      </div>\n    </swiper-slide>\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n  },\n  data() {\n    return {\n      swiperData: [\n        { icon: 'GithubIcon', text: 'Getting Started' },\n        { icon: 'FacebookIcon', text: 'Pricing & Plans' },\n        { icon: 'TwitterIcon', text: 'Sales Question' },\n        { icon: 'InstagramIcon', text: 'Usage Guides' },\n        { icon: 'FacebookIcon', text: 'Pricing & Plans' },\n      ],\n      swiperOptions: {\n        slidesPerView: 'auto',\n        centeredSlides: true,\n        spaceBetween: 30,\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeCoverflowEffect = `\n<template>\n  <swiper\n    class=\"swiper-coverflow\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-35.jpg') },\n        { img: require('@/assets/images/banner/banner-39.jpg') },\n        { img: require('@/assets/images/banner/banner-38.jpg') },\n        { img: require('@/assets/images/banner/banner-37.jpg') },\n        { img: require('@/assets/images/banner/banner-36.jpg') },\n        { img: require('@/assets/images/banner/banner-34.jpg') },\n        { img: require('@/assets/images/banner/banner-33.jpg') },\n        { img: require('@/assets/images/banner/banner-32.jpg') },\n        { img: require('@/assets/images/banner/banner-31.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        effect: 'coverflow',\n        grabCursor: true,\n        centeredSlides: true,\n        slidesPerView: 'auto',\n        coverflowEffect: {\n          rotate: 50,\n          stretch: 0,\n          depth: 100,\n          modifier: 1,\n          slideShadows: true,\n        },\n        pagination: {\n          el: '.swiper-pagination',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeCube = `\n<template>\n  <swiper\n    class=\"swiper-cube-effect\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination swiper-pagination-white\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-21.jpg') },\n        { img: require('@/assets/images/banner/banner-22.jpg') },\n        { img: require('@/assets/images/banner/banner-23.jpg') },\n        { img: require('@/assets/images/banner/banner-24.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        effect: 'cube',\n        grabCursor: true,\n        cubeEffect: {\n          shadow: true,\n          slideShadows: true,\n          shadowOffset: 20,\n          shadowScale: 0.94,\n        },\n        pagination: {\n          el: '.swiper-pagination',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeFadeEffect = `\n<template>\n  <swiper\n    class=\"swiper-navigations\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <!-- Add Arrows -->\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-20.jpg') },\n        { img: require('@/assets/images/banner/banner-19.jpg') },\n        { img: require('@/assets/images/banner/banner-18.jpg') },\n        { img: require('@/assets/images/banner/banner-17.jpg') },\n        { img: require('@/assets/images/banner/banner-16.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        spaceBetween: 30,\n        effect: 'fade',\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n        pagination: {\n          el: '.swiper-pagination',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeGallery = `\n<template>\n  <!-- swiper1 -->\n  <swiper\n    ref=\"swiperTop\"\n    class=\"swiper-gallery gallery-top\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next swiper-button-white\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev swiper-button-white\"\n    />\n  </swiper>\n\n  <!-- swiper2 Thumbs -->\n  <swiper\n    ref=\"swiperThumbs\"\n    class=\"swiper gallery-thumbs\"\n    :options=\"swiperOptionThumbs\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-11.jpg') },\n        { img: require('@/assets/images/banner/banner-12.jpg') },\n        { img: require('@/assets/images/banner/banner-13.jpg') },\n        { img: require('@/assets/images/banner/banner-15.jpg') },\n        { img: require('@/assets/images/banner/banner-16.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        loop: true,\n        loopedSlides: 5,\n        spaceBetween: 10,\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n      swiperOptionThumbs: {\n        loop: true,\n        loopedSlides: 5, // looped slides should be the same\n        spaceBetween: 10,\n        centeredSlides: true,\n        slidesPerView: 4,\n        touchRatio: 0.2,\n        slideToClickedSlide: true,\n      },\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      const swiperTop = this.$refs.swiperTop.$swiper\n      const swiperThumbs = this.$refs.swiperThumbs.$swiper\n      swiperTop.controller.control = swiperThumbs\n      swiperThumbs.controller.control = swiperTop\n    })\n  },\n}\n</script>\n`\n\nexport const codeLazy = `\n<template>\n  <swiper\n    class=\"swiper-lazy-loading\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n        class=\"swiper-lazy\"\n      />\n      <div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\" />\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-9.jpg') },\n        { img: require('@/assets/images/banner/banner-8.jpg') },\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-20.jpg') },\n        { img: require('@/assets/images/banner/banner-5.jpg') },\n        { img: require('@/assets/images/banner/banner-4.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        lazy: true,\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeMultipleSlides = `\n<template>\n  <swiper\n    class=\"swiper-multiple\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-31.jpg') },\n        { img: require('@/assets/images/banner/banner-32.jpg') },\n        { img: require('@/assets/images/banner/banner-33.jpg') },\n        { img: require('@/assets/images/banner/banner-34.jpg') },\n        { img: require('@/assets/images/banner/banner-35.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        slidesPerView: 3,\n        spaceBetween: 30,\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeMultiRowSlides = `\n<template>\n  <swiper\n    class=\"swiper\"\n    :options=\"swiperOption\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      swiperData: [\n        /* eslint-disable global-require */\n        { img: require('@/assets/images/banner/banner-26.jpg') },\n        { img: require('@/assets/images/banner/banner-39.jpg') },\n        { img: require('@/assets/images/banner/banner-28.jpg') },\n        { img: require('@/assets/images/banner/banner-29.jpg') },\n        { img: require('@/assets/images/banner/banner-30.jpg') },\n        { img: require('@/assets/images/banner/banner-31.jpg') },\n        { img: require('@/assets/images/banner/banner-32.jpg') },\n        { img: require('@/assets/images/banner/banner-33.jpg') },\n        { img: require('@/assets/images/banner/banner-34.jpg') },\n        { img: require('@/assets/images/banner/banner-35.jpg') },\n        /* eslint-disable global-require */\n      ],\n      swiperOption: {\n        slidesPerView: 3,\n        slidesPerColumn: 2,\n        spaceBetween: 30,\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n        breakpoints: {\n          1024: {\n            slidesPerView: 3,\n            spaceBetween: 30,\n          },\n          768: {\n            slidesPerView: 2,\n            spaceBetween: 30,\n          },\n          640: {\n            slidesPerView: 1,\n            spaceBetween: 20,\n          },\n        },\n      },\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.swiper {\n\n  ::v-deep .swiper-wrapper {\n    flex-direction: row !important;\n  }\n  .swiper-slide {\n    margin-top: 30px;\n  }\n}\n\n</style>\n`\n\nexport const codeNavigation = `\n<template>\n  <swiper\n    class=\"swiper-navigations\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <!-- Add Arrows -->\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-4.jpg') },\n        { img: require('@/assets/images/banner/banner-14.jpg') },\n        { img: require('@/assets/images/banner/banner-3.jpg') },\n        { img: require('@/assets/images/banner/banner-2.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codePagination = `\n<template>\n  <swiper\n    class=\"swiper-paginations\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-12.jpg') },\n        { img: require('@/assets/images/banner/banner-9.jpg') },\n        { img: require('@/assets/images/banner/banner-8.jpg') },\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-20.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        pagination: {\n          el: '.swiper-pagination',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeParallax = `\n<template>\n  <swiper\n    class=\"swiper-parallax\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <div\n      slot=\"parallax-bg\"\n      class=\"parallax-bg\"\n      data-swiper-parallax=\"-23%\"\n    >\n      <b-img\n        class=\"img-fluid\"\n        :src=\"require('@/assets/images/banner/parallax-4.jpg')\"\n        alt=\"banner\"\n      />\n    </div>\n\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <div\n        class=\"title\"\n        data-swiper-parallax=\"-300\"\n      >\n        {{ data.title }}\n      </div>\n      <div\n        class=\"subtitle\"\n        data-swiper-parallax=\"-200\"\n      >\n        {{ data.subtitle }}\n      </div>\n      <div\n        class=\"text\"\n        data-swiper-parallax=\"-100\"\n      >\n        <b-card-text>\n          {{ data.text }}\n        </b-card-text>\n      </div>\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { BImg} from 'bootstrap-vue'\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    BImg,\n    Swiper,\n    SwiperSlide,\n  },\n  data() {\n    return {\n      swiperData: [\n        { title: 'Slide 1', subtitle: 'Subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet Lorem, ipsum dolor sit amet consectetur..' },\n        { title: 'Slide 2', subtitle: 'Subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis provident atque quod obcaecati voluptatibus ex qui repudiandae sunt dolores. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integeo. Aenean feugiat non eros quis feugiat.' },\n        { title: 'Slide 3', subtitle: 'Subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis provident atque quod obcaecati voluptatibus ex qui repudiandae sunt dolores. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lnt ut libero. Aenean feugiat non eros quis feugiat.' },\n      ],\n      swiperOptions: {\n        speed: 600,\n        parallax: true,\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeProgress = `\n<template>\n  <swiper\n    class=\"swiper-progress\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <!-- Add Arrows -->\n    <div\n      slot=\"button-next\"\n      class=\"swiper-button-next\"\n    />\n    <div\n      slot=\"button-prev\"\n      class=\"swiper-button-prev\"\n    />\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-8.jpg') },\n        { img: require('@/assets/images/banner/banner-7.jpg') },\n        { img: require('@/assets/images/banner/banner-20.jpg') },\n        { img: require('@/assets/images/banner/banner-4.jpg') },\n        { img: require('@/assets/images/banner/banner-5.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n        pagination: {\n          el: '.swiper-pagination',\n          type: 'progressbar',\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeResponsive = `\n<template>\n  <swiper\n    class=\"swiper-responsive-breakpoints\"\n    :options=\"swiperOptions\"\n    :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n  >\n    <swiper-slide\n      v-for=\"(data,index) in swiperData\"\n      :key=\"index\"\n    >\n      <b-img\n        :src=\"data.img\"\n        fluid\n      />\n    </swiper-slide>\n\n    <div\n      slot=\"pagination\"\n      class=\"swiper-pagination\"\n    />\n  </swiper>\n</template>\n\n<script>\nimport { Swiper, SwiperSlide } from 'vue-awesome-swiper'\nimport { BImg } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n    BImg,\n  },\n  data() {\n    return {\n      /* eslint-disable global-require */\n      swiperData: [\n        { img: require('@/assets/images/banner/banner-30.jpg') },\n        { img: require('@/assets/images/banner/banner-31.jpg') },\n        { img: require('@/assets/images/banner/banner-32.jpg') },\n        { img: require('@/assets/images/banner/banner-33.jpg') },\n        { img: require('@/assets/images/banner/banner-34.jpg') },\n        { img: require('@/assets/images/banner/banner-35.jpg') },\n        { img: require('@/assets/images/banner/banner-36.jpg') },\n        { img: require('@/assets/images/banner/banner-37.jpg') },\n        { img: require('@/assets/images/banner/banner-38.jpg') },\n      ],\n      /* eslint-disable global-require */\n\n      swiperOptions: {\n        slidesPerView: 5,\n        spaceBetween: 50,\n        pagination: {\n          el: '.swiper-pagination',\n          clickable: true,\n        },\n        breakpoints: {\n          1024: {\n            slidesPerView: 4,\n            spaceBetween: 40,\n          },\n          768: {\n            slidesPerView: 3,\n            spaceBetween: 30,\n          },\n          640: {\n            slidesPerView: 2,\n            spaceBetween: 20,\n          },\n          320: {\n            slidesPerView: 1,\n            spaceBetween: 10,\n          },\n        },\n      },\n    }\n  },\n}\n</script>\n`\n\nexport const codeVirtual = `\n<template>\n  <b-card-code title=\"Virtual Slides\">\n    <swiper\n      ref=\"mySwiper15\"\n      class=\"swiper-virtual\"\n      :options=\"swiperOptions\"\n      :dir=\"$store.state.appConfig.isRTL ? 'rtl' : 'ltr'\"\n    >\n      <div\n        slot=\"pagination\"\n        class=\"swiper-pagination\"\n      />\n      <div\n        slot=\"button-next\"\n        class=\"swiper-button-next\"\n      />\n      <div\n        slot=\"button-prev\"\n        class=\"swiper-button-prev\"\n      />\n    </swiper>\n\n    <!-- buttons -->\n    <div class=\"demo-inline-spacing justify-content-center\">\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        class=\"font-small-3\"\n        @click.prevent=\"prependSlides\"\n      >\n        Prepend 2 Slides\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        class=\"font-small-3\"\n        @click.prevent=\"toSlide(0)\"\n      >\n        Slide 1\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        class=\"font-small-3\"\n        @click.prevent=\"toSlide(250)\"\n      >\n        Slide 250\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        class=\"font-sm-3\"\n        @click.prevent=\"toSlide(500)\"\n      >\n        Slide 500\n      </b-button>\n      <b-button\n        v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n        variant=\"outline-primary\"\n        class=\"font-small-3\"\n        @click.prevent=\"appendSlide\"\n      >\n        Append Slide\n      </b-button>\n    </div>\n\n    <template #code>\n      {{ codeVirtual }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport { Swiper } from 'vue-awesome-swiper'\nimport { BButton } from 'bootstrap-vue'\nimport 'swiper/css/swiper.css'\nimport Ripple from 'vue-ripple-directive'\nimport { codeVirtual } from './code'\n\nexport default {\n  components: {\n    Swiper,\n    BCardCode,\n    BButton,\n  },\n  directives: {\n    Ripple,\n  },\n  data() {\n    return {\n      codeVirtual,\n      slides: [],\n      prependNumber: 1,\n      appendNumber: 600,\n      swiperOptions: {\n        slidesPerView: 3,\n        centeredSlides: true,\n        spaceBetween: 30,\n        pagination: {\n          el: '.swiper-pagination',\n          type: 'fraction',\n        },\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n        virtual: {\n          slides: Array(600)\n            .fill('Slide')\n            .map((item, index) => \\`\\${item} \\${index + 1}\\`),\n        },\n      },\n    }\n  },\n  methods: {\n    toSlide(index) {\n      this.$refs.mySwiper15.$swiper.slideTo(index, 1)\n    },\n    prependSlides() {\n      this.$refs.mySwiper15.$swiper.virtual.prependSlide([\n        \\`Slide \\${(this.prependNumber -= 1)}\\`,\n        \\`Slide \\${(this.prependNumber -= 1)}\\`,\n      ])\n    },\n    appendSlide() {\n      this.$refs.mySwiper15.$swiper.virtual.appendSlide(\\`Slide \\${(this.appendNumber += 1)}\\`)\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}