отображение слайдшоу

$(document).ready(function() {
 
    var slidesNumber = $(".b-slideshow-item").size();   // определяем количество слайдов
    var slideWidth = $(".b-slideshow-item").eq(1).width(); // определяем ширину одного слайда
    
    $(".b-slideshow-list").after('<ul class="b-slider-nav"></ul>'); // создаём блок списка ссылок на слайды
    
    var navCont = $(".b-slider-nav").html();    
    
    //заполняем список ссылками на каждый слайд:
    for(var i=1; i<=slidesNumber; i++){
        $(".b-slider-nav").html(navCont+'<li><a href="#">'+i+'</a></li>');
        navCont = $(".b-slider-nav").html();
    };
    
    $(".b-slider-nav li").eq(0).addClass("active"); // делаем активной ссылку на первый слайд
    var activeSlide = 1;
    
    $(".b-slider-nav li").click(function(){ // при клике на элемент списка слайдов
        $(".b-slider-nav li").removeClass("active"); // убираем класс active у всех элементов
        $(this).addClass("active"); // добавляем класс active к элементу, на который кликнул пользователь
        var clickedSlide = $(this).index()+1; // в переменную clickedSlide записываем порядковый номер кликнутой ссылки
        $(".b-slideshow-list").animate({
            left: -slideWidth*(clickedSlide-1)+"px" // производим анимацию: перемещаем набор слайдов так, чтобы в видимой области появился слайд с номером, соответствующим номеру ссылки, на которую кликнул пользователь
        }, 800); // анимация будет длиться 800 милисекунд
        activeSlide = $(".b-slider-nav li.active").index()+1; // в переменную activeSlide записываем порядковый номер выбранного слайда
    });
    
    
    $(".b-slideshow-rightarr").click(function(){ // при клике на правую стрелку
        if(activeSlide<slidesNumber){ // если номер активного слайда меньше общего количества слайдов
            $(".b-slideshow-list").animate({
                left: "-=0"+slideWidth+"px" // показываем следующий слайд
            }, 800);
            activeSlide++; // делаем следующий слайд активным
            $(".b-slider-nav li").removeClass("active");
            $(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной следующую ссылку
        }
        else { // если номер активного слайда не меньше общего количества слайдов
            $(".b-slideshow-list").animate({
                left: "0px" // перелистываем слайдшоу в начало, к первому слайду
            }, 800);
            $(".b-slider-nav li").removeClass("active");
            $(".b-slider-nav li").eq(0).addClass("active"); // делаем активным первый слайд
            activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной первую ссылку
        }
    });
    
    $(".b-slideshow-leftarr").click(function(){ // при клике на левую стрелку
        if(activeSlide>1){ // если номер активного слайда больше единицы
            $(".b-slideshow-list").animate({
                left: "+=0"+slideWidth+"px" // пролистываем к предыдущему слайду
            }, 800);
            activeSlide--; // делаем предыдущий слайд активным
            $(".b-slider-nav li").removeClass("active");
            $(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной предыдущую ссылку
        }
        else {
            $(".b-slideshow-list").animate({
                left: -slideWidth*(slidesNumber-1)+"px" // перелистываем всё слайдшоу в конец, к последнему слайду
            }, 800);
            $(".b-slider-nav li").removeClass("active");
            $(".b-slider-nav li").eq(-1).addClass("active"); // делаем активным последний слайд
            activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной последнюю ссылку
        }
    }); 
});