想做各种各样的好看的slider，又想要网页加载更快一些，只能使用最少量的代码来完成更多的功能，splidejs给你想要的功能.
Splidejs官方链接：https://splidejs.com/
完整代码如下
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> //基本js文件，可以放到自己网站上走cdn加载
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"> //css文件，可以自己选择有用的css内容放到网站上，也可以自己完全修改再使用，也可以直接拿来用。
<div class="splide cus_moment_sider" id="cusslider1">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/01.jpg"></a></li>
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/02.jpg"></a></li>
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/03.jpg"></a></li>
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/04.jpg"></a></li>
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/05.jpg"></a></li>
<li class="splide__slide"><a href="#"><img src="https://splidejs.com/images/slides/general/06.jpg"></a></li>
</ul>
</div>
</div>
<style>
.cus_moment_sider img{
width: 100%;
height: auto;
}
.cus_moment_sider .splide__pagination{
bottom: -25px;
}
.cus_moment_sider .splide__pagination li button{
height: 8px;
width: 8px;
margin: 5px;
border-radius: 4px;
}
.cus_moment_sider .splide__pagination__page{
background: #999;
}
.cus_moment_sider .splide__pagination__page.is-active{
background:#f09;
padding: 0 12px;
transform: scale(1.1);
}
</style>
<script>
new Splide( '#cusslider1', { //id名
type : 'loop',
perMove: 1,
perPage: 5,
focus : 'center',
autoplay: true,
lazyLoad: 'nearby',
gap:'20px',
interval:'1000',
breakpoints: {
480: {
perPage: 1,
},
990: {
perPage: 3,
},
}
} ).mount();
</script>基础功能只有一个js文件，只有13.7kb。
其它为css样式，根据自己需求可以调整、压缩，也可以直接使用.
脚本可以根据class名识别，也可以根据id名识别，建议根据id名，方便在同一个页面使用多个slider。如果一个页面两个slider，把初始化slider的代码再复制一次，并根据实际内容修改id名。
此脚本主要设置
| 设置项 | 设置内容 | 值 | 值代表的意义 |
| type | slider类型 | slide | 带有幻灯片过渡的slider |
| loop | 轮播,常用 | ||
| fade | 带有淡入淡出过渡的slider。这不支持该perPage选项 | ||
| width | slider最大宽度 | 可使用10em, 80vw等 | |
| perPage | 一行显示几个内容 | ||
| perMove | 一次移动几个内容 | ||
| focus | 如果一行显示多个，要激活哪个为主显示。 | number | |
| center | 一般使用这个值，多个内容，把要 | ||
| gap | 多个内容之间的间距 | 单位px,em,vw等 | |
| padding | 设置左/右填充或为垂直旋转木马设置顶部/底部填充 | number | string | { left?: number | string, right?: number | string } | { top?: number | string, bottom?: number | string } | 根据自己需要设置 |
| arrows | 是否使用箭头 | true/false | 默认false |
| pagination | 是否使用分页功能 | true/false | 默认false |
| drag | 是否允许用户拖动轮播 | true/false | 默认false |
| autoplay | 自动播放slider | true/false | 默认false |
| interval | 自动播放时 时间间隔 | 单位毫秒 | |
| pauseOnHover | 鼠标悬停时暂停自动播放 | true/false | 默认false |
| lazyLoad | 延迟加载 | FALSE | 禁用延迟加载 |
| nearby | 开始仅加载活动幻灯片（页面）周 | ||
| sequential | 按顺序加载图像 | ||
| breakpoints | 根据屏幕宽度来自适应内容 | { perPage: 4, breakpoints: { 640: { perPage: 2, }, 960: { perPage: 3, }, } } |
此示例 小640，一行2个 641到960，一行3个， 961以上，一行4个显示 可以做屏幕自适应 |
| classes | 要将您自己的类添加到箭头或分页按钮，请为它们提供类 | new Splide( ‘.splide’, { classes: { // Add classes for arrows. arrows: ‘splide__arrows your-class-arrows’, arrow : ‘splide__arrow your-class-arrow’, prev : ‘splide__arrow–prev your-class-prev’, next : ‘splide__arrow–next your-class-next’, // Add classes for pagination. pagination: ‘splide__pagination your-class-pagination’, // container page : ‘splide__pagination__page your-class-page’, // each button }, } ).mount(); |
以上介绍为常用设置项，完整设置项在此：https://splidejs.com/guides/options/
本站所有测试环境均使用ubuntu+lnmp
所有的测试、优化均基于lnmp进行，大部分方法均是相通的，仅仅因为是lnmp是一键安装，集成了大部分安装脚本，方法配置。
本人对于服务器，网站运行环境是十窍通了九窍，还有一窍不通，一桶不满，半桶晃荡，所以在配置上能偷懒的就偷懒，能省事的就省事，并且这些配置仅仅为自己配置过的记录，所有配置均自己在自己服务器上实现，并不一定通用所有配置环境，并且文章描述也可能不通顺，前言不搭后语，驴唇不对马嘴，请需要参照此文章配置的客观慎思而行，不保证你配置的时候一定可以成功。
此段落本站所有文章均有，作者已完成自我批评，只接受评论区指正，不再接受批评，谢谢。