mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 03:53:30 +08:00
feat(shortcode): image loop
This commit is contained in:
parent
44577f65d4
commit
5e6e1fdd8b
@ -122,3 +122,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.swiper-container {
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 2em auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #fff;
|
||||||
|
/* Center slide text vertically */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
37
layouts/shortcodes/imgloop.html
Normal file
37
layouts/shortcodes/imgloop.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
|
||||||
|
<!-- Swiper -->
|
||||||
|
<div class="swiper-container">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
{{$itItems := split (.Get 0) ","}}
|
||||||
|
{{range $itItems }}
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="{{.}}" alt="">
|
||||||
|
</div>
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
<!-- Add Pagination -->
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
|
||||||
|
<!-- Initialize Swiper -->
|
||||||
|
<script>
|
||||||
|
var swiper = new Swiper('.swiper-container', {
|
||||||
|
pagination: '.swiper-pagination',
|
||||||
|
paginationClickable: true,
|
||||||
|
//自动调节高度
|
||||||
|
autoHeight: true,
|
||||||
|
//键盘左右方向键控制
|
||||||
|
keyboardControl : true,
|
||||||
|
//鼠标滑轮控制
|
||||||
|
mousewheelControl : true,
|
||||||
|
//自动切换
|
||||||
|
autoplay : 5000,
|
||||||
|
//懒加载
|
||||||
|
lazyLoading : true,
|
||||||
|
lazyLoadingInPrevNext : true,
|
||||||
|
//无限循环
|
||||||
|
loop : true,
|
||||||
|
});
|
||||||
|
</script>
|
Loading…
Reference in New Issue
Block a user