关于手动原生设置swiper循环滚动
很多前端小伙伴在工作中都用过swiperJs这个插件，相信在使用的过程中都遇到过各种各样的奇葩问题，大部分问题都是可以在swiper官方文档中查找到的，包括使用方法以及里面包含的各种方法、配置、组件等。大家可以参考参考。。。（不喜勿喷）
可能你所要实现的效果可能是：不用循环轮播（实现效果 3.0.0版本）
也可能是：3d循环轮播（实现效果是4.0.0以上版本）
本人近日在工作中就遇到了一个问题，是关于swiper的选项可以循环不断的进行循环的。很多人都用使用过插件本身自带的
loop;true;（可以进行无限轮播）这个配置选项是它插件中自带的，使用过后就可以进行无限循环轮播，但是我发现缺点就是它会自己进行js的dom渲染，然后比如自己写了3个dom，他就会帮咱们在页面上自动渲染6个，前面3个后面3个，滚动到最后的时候会继续渲染，反正就是9个dom一直在循环。但是这种情况是我们不需要的，会给前端和后台同事造成不必要的麻烦。
在询问同事以及度娘无果后，于是就自己研究了一遍，尝试自己写了一下：
dom结构还是规规矩矩的swiper的官方结构；
css样式太多，在这里就不写了。
$(function(){
//设置导航
var swiper = "";
cloneswiper();
// 详情页banner轮播
function cloneswiper(){
swipers = new Swiper('.swiper-container', {
autoplay: {
delay: 6180,
stopOnLastSlide: false,
disableOnInteraction: false,
},
speed: 300,
effect: 'coverflow',//翻转方式/
grabCursor: false,//是否开启抓手形状手
centeredSlides: true,//是否居中显示
slidesPerView: 'auto',//
initialSlide: 1,//初始块（页面）的索引...
coverflowEffect: {
rotate: 0,
stretch: -30,
depth: 50,
modifier: 2,
slideShadows: false,
},
on: {
slideChangeTransitionEnd: function(){
if(this.isEnd){
console.log(3);
first();
}else if(this.isBeginning){
last();
}
},
},
});
}
$(".swiper-slide").click(function(){
var idx = $(this).index();
swipers.slideTo(idx);
});
function first(){
$(".swiper-slide").eq(0).clone().appendTo("#clonenode");
$(".swiper-slide").eq(0).empty().remove();
swipers.destroy(false); //移除所有slide监听事件，所以拖动和click事件失效了。
cloneswiper();
}
function last(){
$(".swiper-slide").last().clone().prependTo("#clonenode");
$(".swiper-slide").last().empty().remove();
swipers.destroy(false); //移除所有slide监听事件，所以拖动和click事件失效了。
cloneswiper();
}
})
上面是自己自定义的一些事件来判断，
当然也可以用swiper中自带的属性来实现一些方法：先看4.0.0以上的（可以实现循环轮播）
var loops = true;
var slide_len = $(".swiper1 .swiper-slide").size();
console.log(slide_len);
if(slide_len <= 2) {
loops = false;
var ele1 = document.getElementsByClassName("swiperbanner-button-prev")[0];
var ele2 = document.getElementsByClassName("swiperbanner-button-next")[0];
document.getElementsByClassName("activity-speaker")[0].removeChild(ele1);
document.getElementsByClassName("activity-speaker")[0].removeChild(ele2);
}
var swipers = new Swiper('.swiper1', {
navigation: {
nextEl: '.swiperbanner-button-next',
prevEl: '.swiperbanner-button-prev',
},
loop: loops,
loopAdditionalSlides : 0,
autoplay: true,
speed: 300,
slideToClickedSlide: true,
effect: 'coverflow', //翻转方式/
grabCursor: false, //是否开启抓手形状手
centeredSlides: true, //是否居中显示
slidesPerView: 'auto', //
spaceBetween: 10,
initialSlide: 1, //初始块（页面）的索引...
coverflowEffect: {
rotate: 0,
stretch: -30,
depth: 50,
modifier: 2,
slideShadows: false,
},
});由于我是要做一些效果，所以加了一些限制。下面是3.0.0以上的：
function myswiper(){
var slide_len = $(".swiper-slide").size();
if(slide_len <=3) {
var ele1 = document.getElementsByClassName("swiper-button-prev")[0];
var ele2 = document.getElementsByClassName("swiper-button-next")[0];
document.getElementsByClassName("swiper-container")[0].removeChild(ele1);
document.getElementsByClassName("swiper-container")[0].removeChild(ele2);
$(".swiper-slide").addClass("stop-swiping");
$(".swiper-pagination").remove();
}
var swipers = new Swiper('.swiper-container', {
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
pagination:'.swiper-pagination',
paginationClickable :true,//分页器设置为可以点击的状态
observer : true,//slide发生变化更新swiper
observeParents : true,//父元素宽度发生变化时跟新swiper
noSwiping : true,//禁用滑动
noSwipingClass : 'stop-swiping',//禁用滑动
roundLengths : true,//防止模糊
spaceBetween : 10,//slide之间的距离
speed: 300,//动画时间
effect: 'slide',//翻转方式/
grabCursor : false,//是否开启抓手形状手
centeredSlides : true,//是否居中显示
slidesPerView : slidenum,//
initialSlide : 1,//初始块（页面）的索引...
resistanceRatio : 0,
// onSlideChangeEnd: function(swiper){
// if(swiper.activeIndex == 0){
// swipers.slideTo(1, 0, false);
// }
// }
});
setInterval(function(){
if(slide_len >2) {
if(swipers.activeIndex == 0){
swipers.slideTo(1, 618, false);
}else if(swipers.activeIndex == slide_len - 1){
swipers.slideTo(slide_len - 2, 618, false);
}else if(swipers.activeIndex == 1){
$(".swiper-button-prev").css("opacity","0");
$(".swiper-button-next").css("opacity","1");
}else if(swipers.activeIndex == slide_len - 2){
$(".swiper-button-prev").css("opacity","1");
$(".swiper-button-next").css("opacity","0");
}else{
$(".swiper-button-next").css("opacity","1");
$(".swiper-button-prev").css("opacity","1");
}
}
},200)
}这些只是一些代码片段。
还有要说的就是IE浏览器的兼容性问题。
要说的就是IE的高版本，IE10以及10以下是不支持swiper4.0的，所以想要兼容IE10，还需要另外引入s'wiper3.0.js以及初始化js