Зацикливание в слайдере

  • Юрий1 год назад
    Подскажите как добавить в слайдер функцию зацикливания, чтобы слайды шли по кругу? Я знаю, что это есть в слайдере под названием swiper в интернете, но у вашего дизайн ещё красивый.

    Пример взят отсюда
    Ответов: 1
  • Дмитрий1 год назад
    Замените код на этот:

    slider.js
    $(document).ready(function () {

    var timeList = 700;
    var TimeView = 5000;
    var RadioBut = true;

    var slideNum = 1;
    var slideTime;
    slideCount = $("#slider .slide").length;

    var animSlide = function(arrow){
    clearTimeout(slideTime);

    if(arrow == "next"){
    if(slideNum == slideCount) { slideNum=1; }
    else{slideNum++}
    translateWidth = -$('#active-slide').width() * (slideNum - 1);
    $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    rotator();
    }
    else if(arrow == "prew")
    {
    if(slideNum == 1) { slideNum=slideCount; }
    else{slideNum-=1}
    translateWidth = -$('#active-slide').width() * (slideNum - 1);
    $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }else{
    slideNum = arrow;
    translateWidth = -$('#active-slide').width() * (slideNum -1);
    $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }

    $(".ctrl-select.active").removeClass("active");
    $('.ctrl-select').eq(slideNum - 1).addClass('active');
    }

    if(RadioBut){
    var $linkArrow = $('<>')
    .prependTo('#active-slide');
    $('#nextbutton').click(function(){
    animSlide("next");
    return false;
    })
    $('#prewbutton').click(function(){
    animSlide("prew");
    return false;
    })
    }
    var adderSpan = '';
    $('.slide').each(function(index) {
    adderSpan += '' + index + '';
    });
    $('
    ' + adderSpan +'
    ').appendTo('#slider-wrap');
    $(".ctrl-select:first").addClass("active");
    $('.ctrl-select').click(function(){
    var goToNum = parseFloat($(this).text());
    animSlide(goToNum + 1);
    });
    var pause = false;
    var rotator = function(){
    if(!pause){slideTime = setTimeout(function(){animSlide('next')}, TimeView);}
    }
    $('#slider-wrap').hover(
    function(){clearTimeout(slideTime); pause = true;},
    function(){pause = false; rotator();
    });

    var clicking = false;
    var prevX;
    $('.slide').mousedown(function(e){
    clicking = true;
    prevX = e.clientX;
    });

    $('.slide').mouseup(function() {
    clicking = false;
    });

    $(document).mouseup(function(){
    clicking = false;
    });

    $('.slide').mousemove(function(e){
    if(clicking == true)
    {
    if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); }
    if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); }
    clicking = false;
    }
    });
    $('.slide').hover().css('cursor', 'pointer');
    rotator();

    });
Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.