Ideas:
To achieve infinite carousel, you need to add one picture before and after the carousel picture. The one added in front is the last picture of the carousel picture (repeated), and the first picture of the carousel picture (repeated). example:
<div class="wrapper-content">
<img class="wrapper-content_img" alt="4" src="img/"/>
<img class="wrapper-content_img" alt="1" src="img/"/>
<img class="wrapper-content_img" alt="2" src="img/"/>
<img class="wrapper-content_img" alt="3" src="img/" />
<img class="wrapper-content_img" alt="4" src="img/" />
<img class="wrapper-content_img" alt="1" src="img/" />
</div>
Then use left to control the sliding. When the picture with alt is 4 in the direction, the next picture slides to the sixth picture, alt is 1, and the index is 1. Then immediately move left to the second picture, the picture with alt is 1. This will not be noticed
OK, post the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0}
.wrapper{position: relative;overflow: hidden;}
.wrapper-content{position: absolute;left: 0;z-index: 1;}
.wrapper-content_img{border: none;outline:none;float: left}
.wrapper-buttons{position: absolute;width: 100px;height: 20px;text-align: center;bottom: 3px;z-index: 2;}
.wrapper-button{float: left;width: 20px;height: 20px;border-radius: 10px;background: gray;margin: 0 2.5px;cursor: pointer;}
.wrapper-arrow{position: absolute;width: 40px;height:40px;cursor: pointer;background-color: RGBA(0,0,0,.3); color: #fff;display: none;top:50%;line-height: 40px;font-size: 36px;text-align: center;z-index: 2;}
.wrapper:hover .wrapper-arrow{display: block;background-color: rgba(0,0,0,.7);}
.wrapper-prev{left:10px;}
.wrapper-next{right:10px;}
.wrapper_on{background-color: yellow}
.wrapper_trans{transition: left .3s ease}
</style>
</head>
<body>
<div >
<div class="wrapper" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}" @mouseover="stop" @mouseout="play">
<div class="wrapper-content" :class="{wrapper_trans:isTrans}" :style="{width:originalData.img_width*(+2)+'px',height:originalData.img_height+'px',left:-originalData.img_width+'px'}" ref="wrapperContent">
<img class="wrapper-content_img" alt="4" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="1" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="2" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="3" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="4" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="1" src="img/" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
</div>
<div class="wrapper-buttons" :style="{left:(originalData.img_width-100)/2+'px'}">
<span :class="['wrapper-button',{'wrapper_on':index==1}]" @click="turnTo(1)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==2}]" @click="turnTo(2)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==3}]" @click="turnTo(3)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==4}]" @click="turnTo(4)"></span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-prev" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="prev">&lt;</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-next" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="next">&gt;</a>
</div>
</div>
<a href="#" rel="external nofollow" style="width: 50px;height: 50px;position: absolute;top: 500px;">aaa</a>
<script type="text/javascript" src="/[email protected]/dist/"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
originalData:{
img_width:350,
img_height:350,
btn_width:40,
btn_height:40,
num:4,
delay:300
},
isTrans:true,//Because when the index is 1 in the last picture, you need to jump to the second picture with index is 1 immediately. This is used to give a transition index:1,
timer:null,//setInterval
clickdelay:false// Used to prevent continuous clicks },
methods:{
next(){
if(){
return
}
=true
if(==){
=1
}else{
+=1
}
(.img_width)
},
prev(){
if(){
return
}
=true
if(==1){
=
}else{
-=1
}
(-.img_width)
},
animate(offset){
var node=this.$
var self=this;
var left=parseInt()-offset
=true
=left+'px'
setTimeout(function(){
if(left<-(*.img_width)){
=false
=-.img_width+'px'
=false //When the last picture is reached }
if(left>-100){
=false
=-*.img_width+'px'
=false //When the first picture is reached }
},)
},
play(){
var self=this;
=setInterval(function(){
()
},2000)
},
stop(){
=false// Used to prevent continuous clicks clearInterval()
=null
},
turnTo(flag){
if(flag==){
return
}else{
var offset=()*.img_width
=flag
(offset)
}
}
},
mounted(){
/*The following is to determine whether the transition animation is completed*/
var node=this.$
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
var self=this
for(var t in transitions){
if( [t] !== undefined ){
var transitionEvent=transitions[t];
}
}
transitionEvent && (transitionEvent, function() {
=false
});
()
}
})
</script>
</body>
</html>
The above is a detailed explanation and integration of the vue unlimited carousel plug-in introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!