Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <template>
<div
v-if="productsSpecs['currentProducts'].length === productsSpecs['nProducts'] || (productsSpecs['carouselStep'] !== 1 && productsSpecs['currentProducts'].length)"
class="carousel-item px-0 py-1 py-sm-2 py-lg-0"
:class="{'transition-4': !productsSpecs['isCategoryCarousel'], 'transition-5': productsSpecs['isCategoryCarousel']}">
<product
v-for="(product, index) in productsSpecs['currentProducts']"
:key="index"
:class="{'ms-1': index > 0, 'ms-sm-4': index > 0, 'col': productsSpecs['currentProducts'].length === productsSpecs['nProducts'], 'col-6': productsSpecs['currentProducts'].length !== productsSpecs['nProducts']}"
:isCategoryCarousel="productsSpecs['isCategoryCarousel']"
:productInfo="product"
:hoverArrowSpecs="productsSpecs['hoverArrowSpecs']"
></product>
</div>
</template>
<script>
import product from '../../products/product.vue';
export default {
components: {product},
props: ['productsSpecs']
}
</script>
<style lang="scss" scoped>
@include media-breakpoint-down(lg) {
.carousel-item::v-deep > .carousel-product-container {
display: none !important;
}
.carousel-item::v-deep > .carousel-product-container:first-child {
display: block !important;
}
.carousel-item::v-deep > .carousel-product-container:nth-child(2) {
display: block !important;
}
.carousel-item {
transition: transform .6s ease-in-out !important;
}
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex !important;
}
@include media-breakpoint-up(lg) {
.carousel-item-next.transition-4 {
transform: translateX(25%) !important;
}
.carousel-item-prev.transition-4 {
transform: translateX(-25%) !important;
}
.carousel-item-next.transition-5 {
transform: translateX(20%) !important;
}
.carousel-item-prev.transition-5 {
transform: translateX(-20%) !important;
}
.carousel-item-end.active {
transition: transform 0s ease-in-out !important;
}
.carousel-item-start.active {
transition: transform 0s ease-in-out !important;
}
.carousel-item {
transition: transform 0.4s ease-in-out !important;
}
}
@media screen and #{$ipad-pro-landscape-breakpoint},
screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-landscape-breakpoint} {
.carousel-item::v-deep > .carousel-product-container {
display: none !important;
}
.carousel-item::v-deep > .carousel-product-container:first-child {
display: block !important;
}
.carousel-item::v-deep > .carousel-product-container:nth-child(2) {
display: block !important;
}
.carousel-item-next.transition-4 {
transform: none !important;
}
.carousel-item-prev.transition-4 {
transform: none !important;
}
.carousel-item-next.transition-5 {
transform: none !important;
}
.carousel-item-prev.transition-5 {
transform: none !important;
}
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%) !important;
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%) !important;
}
.carousel-item-end.active {
transition: transform .6s ease-in-out !important;
}
.carousel-item-start.active {
transition: transform .6s ease-in-out !important;
}
.carousel-item {
transition: transform 0.6s ease-in-out !important;
}
}
</style>
|