Слайдер горизонтально прокручивает изображения расположены в ряд. Изображения должны иметь одинаковые размеры. Прокрутка изображений происходит автоматически или с помощью кнопок вперед - назад. Пример того что получится в итоге, можно посмотреть на примере ниже.
Устанавливается такой слайдер очень просто. как обычно нужно сделать несколько шагов по внедрению скриптов и кодов, чтобы добиться нужного результата.
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; - первоначальное смещение слайдов.
Так же слайдер останавливает свою анимацию, если на него навести курсор.
Если все сделали и настроили правильно, то слайдер уже должен работать на вашем сайте. Материал не сложный, можно подогнать под себя и конкретные задачи на сайте и данный слайдер будет радовать вас и ваших посетителей.
На этом все, спасибо за внимание. 🙂
