0
Ich machte einen hausgemachten Schieberegler, wo ich eine Klasse auf der Folie Abschnitt in Sicht und eine andere Klasse für die Vorschau hinzufügen, aber ich kann keine Lösung finden, damit es zurück zum ersten Folie Abschnitt kommen Wie kann ich es unendlich machen?Machen Sie einen unendlichen Schieberegler
$(document).ready(function() {
\t
\t 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');
\t $(li.get().reverse()).filter('.prev').removeClass('prev').next().addClass('prev');
});
});.project-bg{
\t position:absolute;
\t height:75vh;
\t width:25vw;
\t top:50%;
\t left:50%;
\t margin-top:-37.5vh;
\t margin-left:-35vw;
\t overflow:hidden;
}
.project-bg .bg-in{
\t width: 100%;
height: 100%;
}
.project-bg:nth-child(2) .bg-in{
\t 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{
\t position:absolute;
\t height:20px;
\t width:60px;
\t right:0%;
\t bottom:0%;
\t margin-right:250px;
\t margin-bottom:50px;
\t cursor:pointer;
\t z-index:10;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
<ul>
\t <li class="project-bg"><div class="bg-in"></div></li>
\t <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">
\t <polygon points="56.1,9.3 49.7,11.6 49.7,7.1 "/>
\t <g>
\t \t <rect x="3.9" y="8.8" width="46" height="1"/>
\t </g>
\t </svg>
\t </div>
Mögliche Duplikat [Infinity-Loop-Slider Concepts] (http://stackoverflow.com/questions/15876754/infinity-loop-slider-concepts) – Nhan
eigentlich i kein nicht genutzt slider plugin, weil ich nicht die linke css-Eigenschaft verwenden wollte [gallery.animate ({links: "+ =" + (-100 * delta)}] – Tiaw