В разработку слайд-шоу на JavaScript Разработка веб-сайтов

function Slideshow( element ) {
this.el = document.querySelector( element );
this.init();
}


Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector( ".slider-wrapper" );
this.slides = this.el.querySelectorAll( ".slide" );
//...
},
_slideTo: function( pointer ) {
var currentSlide = this.slides[pointer];
this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";
}
};

Теперь надо сделать событие клика для каждого элемента управления. В jQuery можно взять метод .on(), а в чистом JS - метод addEventListener().

Также надо проверять, не достиг ли указатель границ списка – 0 для “Предыдущий” и общего количества слайдов для “Следующий”. В каждом случае надо прятать соответствующую кнопку:



(function( $ ) {
$.fn.slideshow = function( options ) {
options = $.extend({
wrapper: ".slider-wrapper",
slides: ".slide",
previous: ".slider-previous",
next: ".slider-next",
//...
speed: 500,
easing: "linear"
}, options);

var slideTo = function( slide, element ) {
var $currentSlide = $( options.slides, element ).eq( slide );

$( options.wrapper, element ).
animate({
left: - $currentSlide.position().left
}, options.speed, options.easing );

};


return this.each(function() {
var $element = $( this ),
$previous = $( options.previous, $element ),
$next = $( options.next, $element ),
index = 0,
total = $( options.slides ).length;

$next.on( "click", function() {
index++;
$previous.show();

if( index == total - 1 ) {
index = total - 1;
$next.hide();
}

slideTo( index, $element );

});

$previous.on( "click", function() {
index--;
$next.show();

if( index == 0 ) {
index = 0;
$previous.hide();
}

slideTo( index, $element );

});



});
};


})( jQuery );

А на чистом JS это выглядит так: