mirror of
https://github.com/ivabus/www
synced 2024-11-22 14:45:05 +03:00
Twitter swiper on mobile
This commit is contained in:
parent
33955d1416
commit
c38400e8a0
3 changed files with 80 additions and 1 deletions
|
@ -820,7 +820,7 @@
|
|||
<h2 class="display-3">DON’T JUST TAKE OUR WORD FOR IT… TWITTER’S BEEN SIPPING THE TEA TOO!</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row twitter-desktop">
|
||||
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
|
@ -837,6 +837,19 @@
|
|||
{{- partial "twitter-card.html" -}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row twitter-mobile">
|
||||
<div class="col">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{{- range .Data.Pages }}
|
||||
<div class="swiper-slide">
|
||||
{{- partial "twitter-card.html" . -}}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@ -859,6 +872,30 @@
|
|||
|
||||
<style>
|
||||
|
||||
@media only screen and (min-width: 576px) {
|
||||
|
||||
.twitter-desktop{
|
||||
visibility: visible;
|
||||
}
|
||||
.twitter-mobile{
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
.twitter-desktop{
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
.twitter-mobile{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.twitter-card{
|
||||
border: 2px solid gray;
|
||||
border-radius: 10px;
|
||||
|
@ -876,4 +913,31 @@
|
|||
|
||||
</style>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var mySwiper = new Swiper ('.swiper-container', {
|
||||
spaceBetween: 10,
|
||||
freeMode: true,
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
|
|
0
src/layouts/partials/twitter-card-swiper.html
Normal file
0
src/layouts/partials/twitter-card-swiper.html
Normal file
15
src/layouts/partials/twitter-grid.html
Normal file
15
src/layouts/partials/twitter-grid.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
{{- partial "twitter-card.html" -}}
|
||||
</div>
|
Loading…
Reference in a new issue