Простой слайдер с кнопками управления Вперед и Назад

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

Устанавливается такой слайдер очень просто. как обычно нужно сделать несколько шагов по внедрению скриптов и кодов, чтобы добиться нужного результата.

HTML код

В том месте, где хотите вывести сам слайдер, нужно добавить HTML код нашего будущего слайдера.

<div class="sl_ctr">
<div class="sldr">  
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
</div>
<div class="prv_b"></div>
<div class="nxt_b"></div>
</div>

• sl_ctr - основной контейнер слайдера, что содержит в себе все элементы слайдера.
• sldr - контейнер с изображениями. внутри которого располагаются 4 изображения. Можете размещать сколько вам угодно изображений.
• prv_b - кнопка перемещения слайдов назад.
• nxt_b - кнопка перемещения слайдов вперед.

CSS стили

Далее в свой файл стилей, добавляются стили будущего слайдера.

.sl_ctr{
position:relative;
width:450px;
height:300px;
overflow:hidden;
}
.sldr{
position:relative;
width:10000px;
height:300px;
}
.sldr img{
float:left;
}
.prv_b, .nxt_b{
position:absolute;
top:135px;
display:block;
width:35px;
height:35px;
cursor:pointer;
}
.prv_b:hover, .nxt_b:hover{opacity:.6;}
.prv_b{
left:10px;
background:url(images/prv.png) no-repeat;
}
.nxt_b{
right:10px;
background:url(images/nxt.png) no-repeat;
}

• sl_ctr - мы задаем нашему контейнеру размеры слайдера, в данном случаи 450 пикселей ширины и 300 высоты. Так же задан параметр overflow:hidden, для обрезки всего что выходит за границы этого контейнера. В нашем случаи это изображения что расположены в одну строку.
• sldr - контейнеру с картинками задаем большую ширину в 10000 пикселей, чтобы у нас вместились все картинки, сколько бы их не было. также задается высота, как и основному контейнеру в 300 пикселей.
• sldr img - все картинки прижимаем влево, для того чтобы они стали в ряд.
• .prv_b, .nxt_b - задаем общие стили для кнопок управления, потом для каждой по отдельности.

Подключение скриптов

Как упомянул в самом начале, наш слайдер использует для работы - jQuery. Поэтому нужно подключить библиотеку, если это не сделано ранее и после нее наш скрипт. Чтобы сделать правильно, используйте статью Как и где подключить скрипт?. Библиотека:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Ну и сам скрипт, что будет совершать анимацию и управление слайдером. Используя инструкцию, тоже подключаете его удобным способом.

<script>
$(function() {
var sldr = $('.sldr'),
sldrContent = sldr.html(),
slideWidth = $('.sl_ctr').outerWidth(),
slideCount = $('.sldr img').length,
prv_b = $('.prv_b'),
nxt_b = $('.nxt_b'),
sldrInterval = 3300,
animateTime = 1000,
course = 1,
margin = - slideWidth;
$('.sldr img:last').clone().prependTo('.sldr');$('.sldr img').eq(1).clone().appendTo('.sldr');$('.sldr').css('margin-left',-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({'marginLeft':-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({'marginLeft':-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({'marginLeft':margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});
</script>

Ну и разберем основные настройки в скрипте.

• var sldr = $('.sldr') - задаем переменную из нашего контейнера для изображений. Если будете менять название класса, то делайте это очень внимательно, чтобы они совпадали как в HTML, так и в CSS и в скрипте.
• slideWidth = $('.sl_ctr').outerWidth() - определяем ширину нашего слайдера.
• slideCount = $('.sldr img').length - определяем количество слайдов, то бишь сколько вы добавили в код картинок.
• prv_b = $('.prv_b') - определяем блок с кнопкой назад, управления слайдами.
• prv_b = $('.nxt_b') - определяем блок с кнопкой вперед, управления слайдами.
• sldrInterval = 3300 - время, сколько показывается одно изображение. 3,3 секунды
• animateTime = 1000 - время анимации, смены слайда. 1 секунда.
• course = 1 - направление движения слайдов. В данном случаи изображения сдвигаются влево, показывая нам те что расположены правее. Если установить значение -1, то направление поменяется.
• margin = - slideWidth; - первоначальное смещение слайдов.

Так же слайдер останавливает свою анимацию, если на него навести курсор.

Если все сделали и настроили правильно, то слайдер уже должен работать на вашем сайте. Материал не сложный, можно подогнать под себя и конкретные задачи на сайте и данный слайдер будет радовать вас и ваших посетителей.

На этом все, спасибо за внимание. 🙂