Question

我制作了一个自制的滑块，我在视图中的幻灯片部分添加了一个类，另一个类用于预览，但我找不到一个解决方案让它回到第一个幻灯片部分我该如何制作它是无限的？

$(document).ready(function() {
	
	var ul = $('.project ul'),
    li = ul.find('li');

var $next=$('#arrow');

li.eq(0).addClass('prev');
li.eq(1).addClass('active');


$next.on('click', function(){
    $(li.get().reverse()).filter('.active').removeClass('active').next().addClass('active');
	 $(li.get().reverse()).filter('.prev').removeClass('prev').next().addClass('prev');
});

});

.project-bg{
	position:absolute;
	height:75vh;
	width:25vw;
	top:50%;
	left:50%;
	margin-top:-37.5vh;
	margin-left:-35vw;
	overflow:hidden;
}

.project-bg .bg-in{
	 width: 100%;
    height: 100%;
}
.project-bg:nth-child(2) .bg-in{
	background:red;
}

.project-bg:nth-child(3) .bg-in{
background:blue;
}
.project-bg:nth-child(4) .bg-in{
background:yellow;
}
.project-bg:nth-child(5) .bg-in{
background:orange;
}

.project-bg .bg-in{
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.project-bg.active .bg-in{
    transform: translate3d(0%, 0, 0)
}

.project-bg.prev .bg-in{
    transform: translate3d(-100%, 0, 0)
}

#arrow{
	position:absolute;
	height:20px;
	width:60px;
	right:0%;
	bottom:0%;
	margin-right:250px;
	margin-bottom:50px;
	cursor:pointer;
	z-index:10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
 
        <ul>
        	<li class="project-bg"><div class="bg-in"></div></li>
        	<li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
         </ul>
           
        </div>
        
         <div id="arrow">
        <svg id="arrow-svg" viewBox="0 0 60 20">
	<polygon points="56.1,9.3 49.7,11.6 49.7,7.1 "/>
	<g>
		<rect x="3.9" y="8.8" width="46" height="1"/>
	</g>
	</svg>
     	</div>

Answer 1

检查最后的李。如果是，则将活动类添加到第一个li。而已。检查以下链接 - jsfiddle: Jsfiddle

制作无限滑块

1 个答案: