最近一直在研究Bootstrap5的前端开发,看bootstrap例子的时候发现了一个好的模型,所以就手痒给自己写了一个
PC端
移动端
先简单的介绍一些吧,支持移动端和PC端的拖动且由最后一张图切到第一张图的时候是平滑过渡,不会在掉头过渡
OK,下面那直接放代码,切记如果要直接用的话注意要在头部加一个Bootstrap5的CSS代码引入
<div class="slider">
<div class="slider-indicators">
<button class="active" data-to="0" tabindex="-1"></button>
<button data-to="1" tabindex="-1"></button>
<button data-to="2" tabindex="-1"></button>
</div>
<div class="slider-outer">
<div class="slider-inner">
<div class="slider-item">
<a href="">
<img src="https://around.createx.studio/img/demo/food-blog/videos/03.jpg" loading="lazy">
<span>Gallery video caption</span>
</a>
</div>
<div class="slider-item">
<a href="">
<img src="https://around.createx.studio/img/demo/food-blog/videos/01.jpg" loading="lazy">
<span>Gallery video caption</span>
</a>
</div>
<div class="slider-item">
<a href="">
<img src="https://around.createx.studio/img/demo/food-blog/videos/02.jpg" loading="lazy">
<span>Gal