利用swiper在条目中添加轮播图

来自Puson_PP百科
跳到导航 跳到搜索

准备工作

前往swiper官网,下载相关文件,我这里用的是swiper6

先在本地配置代码,引入swiper6中的swiper-bundle.min.css和swiper-bundle.min.js文件。我这里把滚动条那行移除了

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" onclick=""><img src="1.png"></div>
            <div class="swiper-slide"><img src="2.png"></div>
            <div class="swiper-slide"><img src="3.png"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
    </div>
    <script src="./swiper-bundle.min.js"></script>
</body>
</html>

在css文件中设定一下图片的大小,和演示图片分辨率一致

.swiper-container {
	width: 576px;
	height: 360px;
}

配置javascript文件,初始化swiper。将垂直切换选项注释掉,使图片水平切换

 var mySwiper = new Swiper('.swiper-container', {
     //direction: 'vertical', // 垂直切换选项
     loop: true,
     // 循环模式选项
     // 如果需要分页器
     pagination: {
         el: '.swiper-pagination',
     },
 
     // 如果需要前进后退按钮
     navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
     },
 })

配置autoplay设置,添加到前进后退按钮下方,将最后一项禁止用户操作改为false

 var mySwiper = new Swiper('.swiper-container', {
     //direction: 'vertical', // 垂直切换选项
     loop: true,
     // 循环模式选项
     // 如果需要分页器
     pagination: {
         el: '.swiper-pagination',
     },
 
     // 如果需要前进后退按钮
     navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
     },
 
     autoplay: {
         delay: 2500,  //每张图片停顿时间
         stopOnLastSlide: false, //是否在最后一张图时停止轮播
         disableOnInteraction: false, //禁止用户操作
     },
 })

到目前为止基本配置已经完成了,可以再添加一些交互配置,我这里设置鼠标移动到图片上时图片变暗且光标变为可点击(手掌)

.swiper-container:hover {
	filter: brightness(90%);
	cursor: pointer;
}

配置轮播模板

将配置好的css和javascript添加到mediawiki:common.css和mediawiki:common.js中(注:这里我本来想引入其他css和js文件,因为直接把这么多代码放到一个地方感觉太乱了,但是源css文件包含多个报错,无法变成已过滤的css,没办法用TemplateStyles的方式引用,所以先这么办,有时间再修改)

新建轮播模板,上传需要轮播的图片。最终效果

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">[[File:图片|link=跳转链接]]</div>
            <div class="swiper-slide">[[File:|link=]]</div>
            <div class="swiper-slide">[[File:|link=]]</div>
            <div class="swiper-slide">[[File:|link=]]</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>

将轮播模板添加到条目

我这里用了最简单粗暴的方式:浮动元素+空div块+padding将模板放到了一个合适的位置。没什么参考价值这里就不展示代码了,这种方式完全没有考虑到响应式布局,对于移动端极其不友好!,待改进