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 | <template>
<div
class="position-relative py-lg-5 category-carousel px-3 px-sm-intermediate px-inter-0"
:style="{'background-color': containerBgColor}">
<div class="h-100">
<banner-card
:textCardSpecs="{...textCardSpecs, isCategoryCarousel: carouselSpecs['isCategoryCarousel'], isNotPartOfWrapper: true}"
></banner-card>
<simple-carousel
class="carousel-pos specific-breakpoint px-0 ps-lg-0 pe-lg-3"
:carouselSpecs="carouselSpecs"
></simple-carousel>
</div>
</div>
</template>
<script>
import bannerCard from '../../banners/simple-banner/banner-card.vue'
import simpleCarousel from '../simple-carousel/simple-carousel.vue'
export default {
components: {bannerCard, simpleCarousel},
props: ['containerBgColor', 'carouselSpecs', 'textCardSpecs']
}
</script>
<style lang="scss" scoped>
.carousel-pos {
position: absolute !important;
height: 60%;
right: 0;
top: 5rem;
width: calc(100vw - (50vw - (720px - 22rem)));
margin: auto;
}
.category-carousel {
height: 34rem;
//width: 100%;
//max-width: 1440px;
margin: auto;
}
@include media-breakpoint-down(inter) {
.carousel-pos {
width: calc(100vw - 22rem);
}
}
@media screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-landscape-breakpoint},
screen and #{$ipad-pro-landscape-breakpoint} {
.specific-breakpoint.carousel-pos {
position: static !important;
margin-top: 4rem;
width: 100%;
}
.category-carousel {
height: auto;
}
}
@include media-breakpoint-down(lg) {
.carousel-pos {
position: static !important;
margin-top: 3rem;
height: auto;
width: 100%;
}
.category-carousel {
height: auto;
}
}
</style>
|