Created
September 7, 2020 09:21
-
-
Save rasithupamal/d11b87732c92794dfb52c8aa4f7c221c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="container pt-5"> | |
| <div style="position: relative;margin: 0 0 50px 0;border-bottom: 1px solid #888;text-align: center"> | |
| <span style="position: relative;float: none;padding: 0 25px;background: #fff;top: 12px;letter-spacing: .1em;"class="h4 mb-5">Best Sellers</span> | |
| </div> | |
| <template v-if="!loading"> | |
| <div v-swiper:mySwiper="swiperOption"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide" :key="index" v-for="(item,index) in data"> | |
| <product-card-type-one :product="item" /> | |
| </div> | |
| </div> | |
| <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div> | |
| <div class="boc-button-prev" slot="button-prev"> | |
| <span class="czi-arrow-left"></span> | |
| </div> | |
| <div class="boc-button-next" slot="button-next"> | |
| <span class="czi-arrow-right"></span> | |
| </div> | |
| </div> | |
| </template> | |
| <template v-else> | |
| <content-placeholder type="image" :count="1"></content-placeholder> | |
| </template> | |
| </div> | |
| </template> | |
| <script> | |
| import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; | |
| import ContentPlaceholder from "../../Common/ContentPlaceholder"; | |
| import ProductCardTypeOne from "../../Products/ProductCardTypeOne"; | |
| import "swiper/css/swiper.css"; | |
| export default { | |
| name: "brand-best-sellers", | |
| props: ["data"], | |
| components: { | |
| Swiper, | |
| SwiperSlide, | |
| "content-placeholder": ContentPlaceholder, | |
| ProductCardTypeOne | |
| }, | |
| directives: { | |
| swiper: directive | |
| }, | |
| computed: { | |
| loading() { | |
| if (this.data) { | |
| return false; | |
| } | |
| return true; | |
| } | |
| }, | |
| data() { | |
| return { | |
| swiperOption: { | |
| loop: true, | |
| slidesPerView: 5, | |
| slidesPerGroup: 5, | |
| spaceBetween: 20, | |
| slidesOffsetAfter: 60, | |
| navigation: { | |
| nextEl: ".boc-button-next", | |
| prevEl: ".boc-button-prev" | |
| }, | |
| pagination: { | |
| clickable: true | |
| }, | |
| breakpoints: { | |
| // when window width is >= 320px | |
| 320: { | |
| slidesPerView: 2, | |
| spaceBetween: 20, | |
| slidesOffsetBefore: 40, | |
| slidesPerGroup: 1 | |
| }, | |
| // when window width is >= 480px | |
| 480: { | |
| slidesPerView: 3, | |
| spaceBetween: 30, | |
| slidesOffsetBefore: 40 | |
| }, | |
| // when window width is >= 640px | |
| 640: { | |
| slidesPerView: 4, | |
| spaceBetween: 40, | |
| slidesOffsetBefore: 40 | |
| }, | |
| 1024: { | |
| slidesPerView: 5, | |
| spaceBetween: 40 | |
| } | |
| } | |
| } | |
| }; | |
| }, | |
| created() {} | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment