Продолжение поста о том как создать слайдер на jQuery, как сделать слайдер на jQuery.

Рассказ о том как создать слайдер на jQuery своими руками

В ответ на комментарий Виктора о том, как добавить стрелочки, публикуем новый пост об этом.

Для начала нам потребуется прежний слайдер, добавим в HTML:




А теперь сделаем, чтобы стрелочки слайдера заработали.

Допишем функцию показа предидущего слайда:

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.slidewrapper').children().size()-1;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

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

Ну и немного доработаем вызовы функций:


$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,1000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,1000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,1000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,1000);
    });
});

Здесь мы навязываем действие на клик стрелочек. При нажатии на стрелочку "Предыдущий" мы останавливаем таймер слайдера (чтобы не дергались слайды), вызываем функцию "показать предыдущий", и включаем таймер заново, чтобы слайдер продолжил своё движение.
Точно также и со стрелочкой "Следующий".

Готово! Слайдер работает.

Пример работы: как создать слайдер на jQuery своими руками

Пример работы: как создать слайдер на jQuery своими руками

Посмотреть на то, как это сделано на jsFiddle можно по ссылке: http://jsfiddle.net/Vj6tr/1/

Надеюсь мы разобрались с тем как создать плагин на jquery своими руками.
Если что-то не совсем понятно, или нужно доработать какую-нибудь фишку — пишите комменты :)