mirror of
https://github.com/ivabus/www
synced 2024-11-23 04:45:05 +03:00
Switched up the horizontal scroll paradigm for mobile
This commit is contained in:
parent
f742fb6e82
commit
53729d4120
3 changed files with 49 additions and 40 deletions
|
@ -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 -->
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
Loading…
Reference in a new issue