Switched up the horizontal scroll paradigm for mobile

This commit is contained in:
Thomas Smith 2022-09-23 17:23:20 -04:00
parent f742fb6e82
commit 53729d4120
3 changed files with 49 additions and 40 deletions

View file

@ -139,6 +139,34 @@
height: 100%; height: 100%;
} }
.swiper-slide {
text-align: center;
font-size: 18px;
width: 90% !important;
margin-right: 10px !important;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style> </style>
<!-- Package CTA Section --> <!-- Package CTA Section -->

View file

@ -42,8 +42,7 @@
</div> </div>
</section> </section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- JavaScript Bundle with Popper --> <!-- JavaScript Bundle with Popper -->
@ -150,26 +149,15 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
rdt('track', 'ViewContent'); rdt('track', 'ViewContent');
</script> </script>
<script> <script>
const swiper = new Swiper('.swiper', { var swiper = new Swiper(".mySwiper", {
// Optional parameters slidesPerView: 3,
direction: 'horizontal', spaceBetween: 10,
loop: true, freeMode: true,
loop: true,
// If we need pagination pagination: {
pagination: { el: ".swiper-pagination",
el: '.swiper-pagination', clickable: true,
}, },
});
// Navigation arrows </script>
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>

View file

@ -1,26 +1,19 @@
<!-- Slider main container --> <!-- Slider main container -->
<div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="swiper"> <div class="swiper mySwiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div> <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div> <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div> <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
... <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
</div> </div>
<!-- If we need pagination --> <!-- <div class="swiper-pagination"></div> -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div> </div>
</div> </div>
</div> </div>
</div>