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 | <template>
<div :class="['carousel-item', 'w-100', {'active': isActive}]">
<div class="d-flex flex-column flex-lg-row justify-content-between">
<div class="main-carousel-img-container">
<img data-not-lazy :src="item['src']" class="main-carousel-img" alt="Main carousel image">
</div>
<inner-carousel
:items="item['subItems'] /* inner carousel items */"
:secondaryId="secondaryId /* inner carousel id */"
:category1="item['name1'] /* title */"
:category2="item['name2'] /* subtitle */"
></inner-carousel>
</div>
</div>
</template>
<script>
import innerCarousel from './inner-carousel.vue'
export default {
components: {innerCarousel},
props: ['isActive', 'item', 'secondaryId']
}
</script>
<style lang="scss" scoped>
.main-carousel-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-carousel-img-container {
width: 90%;
flex-grow: 1;
}
@media screen and #{$ipad-pro-landscape-breakpoint},
screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-landscape-breakpoint} {
.main-carousel-img {
width: 100%;
height: auto;
}
.main-carousel-img-container {
width: 100%;
height: auto;
}
.carousel-item > div {
flex-direction: column !important;
}
}
@include media-breakpoint-down(lg) {
.main-carousel-img {
width: 100%;
height: 100%;
}
.main-carousel-img-container {
width: 100%;
height: 50vh;
}
}
</style>
|