1. 效果展示

【Web开发】基于swiper插件的轮播图实现_html

2.代码

2.1 加载插件

swiper插件下载链接

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

2.2 添加HTML内容

html代码中出现的{{}}和{%%}为flask框架的jinja2模板引擎内容，目的是为了实现前端代码循环以及后端数据引入，使用时类似{{}}的数据替换成自己的数据，{%%}中的for循环就把代码多拷贝几遍即可。

<div class="owl-carousel owl-theme slide" id="featured">
	<div class="swiper">
		{% if swiper %}
        	<div class="swiper-wrapper">
            	{% for item in swiper %}
	                <div class="swiper-slide">
                    	<div class="item">
                        	<article class="featured">
                            	<div class="overlay"></div>
                                <figure>
                                    <img src="{{ pic_path ~ item.hash~ ".jpg" }}"
                                                             alt="Sample Article">
                                </figure>
                                <div class="details">
                                	<div class="category">
                                    	<a href="category.html">
                                    			{{ item.genres }}
                                    	</a>
                                    </div>
                                    <h1>
                                        <a href="{{ buildUrl("single")~"?id="~item.id }}">
                                        	{{ item.title }}
                                        </a>
                                    </h1>
                                    <div class="time">{{ item.date }}</div>
                                </div>
                            </article>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        }
    })
</script>

3. 前进后退按钮颜色控制

只需要在把第二行代码：<div class="swiper">改为：<div class="swiper" style="--swiper-theme-color:#FFFFFF">即可，#FFFFFF代表白色，读者可自行调节规定按钮颜色。

如果想了解更多关于swiper插件的用法可以访问：swiper中文网


  • 阿里云国际版折扣https://www.yundadi.com

    • 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6