Блог

У меня есть следующий объект javascript, управляющий моим слайдером:

 Slider = {
    slideWrap: "#slider ul",
    slide: "#slider ul li",
    prevTrigger: "#slider a.prev",
    nextTrigger: "#slider a.next",
    control: "#slider a.control",
    init: function() {
        jQuery(this.nextTrigger).click(this.moveRight.bind(this));
        jQuery(this.prevTrigger).click(this.moveLeft.bind(this));
    },
    moveRight: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).first().clone().appendTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "-100vw");
        jQuery(this.control).css("pointer-events", "none");
        setTimeout(function(){
            jQuery("#slider ul").addClass("no-transition");
            jQuery("#slider ul li").first().remove();
            jQuery("#slider ul").css("marginLeft", "0px");
            jQuery("a.control").css("pointer-events", "auto");
        }, 500);
    },
    moveLeft: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).last().clone().prependTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "100vw");
        setTimeout(function(){
            jQuery('#slider ul').addClass('no-transition');
            jQuery('#slider ul li').last().remove();
            jQuery('#slider ul').css("marginLeft", "0px");
            jQuery('a.control').css('pointer-events', 'auto');
        }, 500);
    }
}
  

Перемещение вправо отлично работает, поскольку ползунок скользит вправо, клонирует первый слайд, добавляет его в конец слайдера, а затем удаляет исходный первый слайд в функции тайм-аута. Тем не менее, у меня проблема со скольжением влево, поскольку последний слайд должен предшествовать перемещению слайдера.

Смотрите мою скрипку здесь …https: //jsfiddle.net/f2hb68tn/12/

Вы можете попробовать этот jsfiddle: https://jsfiddle.net/f2hb68tn/22 /.

Вот измененный код:

 moveLeft: function(e) {
    e.preventDefault();
    jQuery(this.slideWrap).addClass('no-transition');
    jQuery(this.slide).last().clone().prependTo(this.slideWrap);  // Prepend last slide
    var ctlWidth = "-"   jQuery("#slider").width()   "px";        // In pixels for IE11 
    jQuery(this.slideWrap).css("marginLeft", ctlWidth);        // Stay on current slide
    jQuery(this.control).css("pointer-events", "none");
    setTimeout(function () {
        jQuery('#slider ul').removeClass("no-transition");
        jQuery('#slider ul').css("marginLeft", "0px");     // Transition to first slide
     }, 10);                                   // Zero ms does not work well in Firefox
    setTimeout(function(){
        jQuery('#slider ul').addClass('no-transition');
        jQuery('#slider ul li').last().remove();                   // Remove last slide
        jQuery('a.control').css('pointer-events', 'auto');
    }, 500);
}
  

В IE11 (и, возможно, в других версиях IE), ctlWidth должно быть указано в пикселях (например "-524px" ). Если вам не нужно поддерживать этот браузер, вы можете использовать "-100vw" вместо этого.