Ich versuche einen Bild-Schieberegler zu erstellen, der nur funktioniert, wenn die Bildschirmgröße kleiner als 640 Pixel ist. Wenn der Bildschirm breiter als 640 ist, zeigt er 3 Einträge mit 33% Breite, so dass er gut auf dem Bildschirm passt. Ich habe es geschafft, sie zu gleiten, aber wenn ich wieder auf größere als 640 Pixel Größe und Intervall löschen, erstarrt der Slider gerade und lässt mich verzerrt 3 Bilder. Gibt es eine Möglichkeit, Schieberegler nur auf einer Bildschirmgröße arbeiten zu lassen? Der folgende Code ist, was ich bis jetzt bekommen habe, aber ich habe einfach keine ähnliche Aufgabe gefunden, oder jemanden gesehen, der es auf Google gemacht hat.Erstellen eines Inhalts-Schiebereglers, der nur auf kleinen Bildschirmen funktioniert
JQuery-Code
var slider = $("#slider")
var container = $("#slides");
var slides = $(".slides");
var len = 3;
var current = 1;
var width = '100%';
var animationSpeed = 3000;
var pause = 3000;
var interval;
function startSlider() {
interval = setInterval(function() {
container.animate({
'margin-left': '-=' + width
}, animationSpeed, function() {
if (++current === len) {
current = 1;
container.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider(){
clearInterval(interval);
}
function checkView() {
var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(winWidth < 640 ) {
startSlider();
} else{
stopSlider();
}
}
checkView();
$(window).resize(checkView);
Html-Code
<section id="slider" class="slider clearfix">
<nav class="nav-arrow">
<img id="#prev" class="prev" src="images/1463330656_br_prev.png" alt="prev">
<img id="#next" class="next" src="images/1463330669_br_next.png" alt="next">
</nav>
<ul id="slides" class="slides">
<li><img class="slide" src="images/box.jpg" alt=""></li>
<li><img class="slide" src="images/bridge.jpg" alt=""></li>
<li><img class="slide" src="images/smile.jpg" alt=""></li>
</ul>
</section>
, wenn Sie die Schieberegler wollen beide am Telefon/Mobilgerät arbeiten und auf dem Desktop an der Quelle dieser Seite einen Blick http://musicmatters.ie/gallery .html. Es hat ein paar hilfreiche jquery gallery-helper Skripte. Einen Blick wert. jquery.wmuSlider.js und jquery.wmuGallery.js –