ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-10 09:45:17 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Twitter swiper on mobile

Browse source
This commit is contained in:
Thomas Smith 2023-01-26 17:41:41 -05:00
parent 33955d1416
commit c38400e8a0
3 changed files with 80 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/layouts/index.html
View file

@ -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
View file

15
src/layouts/partials/twitter-grid.html Normal file
View 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>