Как сделать слайдер изображений на jQuery

В этой статье я покажу как сделать слайдер изображений на jQuery.

Прежде чем добавлять javascript, необходимо составить структуру документа на HTML и CSS. Так легче ориентироваться. Но перед этим подумайте вот о чем:

Прежде чем добавлять javascript, необходимо составить структуру документа на HTML и CSS. Так легче ориентироваться. Но перед этим подумайте вот о чем:

Где скрывать элементы?

• Внизу, наверху, за элементом или под видимым элементом?

Как скрывать элементы?

• Скрываемым элементам назначить свойство display со значением none (веб-страница формируется так, словно элемента и не было)?
• Скрывать за родительским элементом, которому назначить overflow:hidden ?
• Или скрывать под видимым элементом, при помощи свойства z-index ?

Ладно, хватит об этом, давайте начнем.

Разметка HTML

Итак, давайте представим, что мы будем делать. Для этого я нарисовал небольшую схему.

HTML

<div id="gallery-wrap">
    <ul id="gallery">
        <li><a href="/image1.jpg">
         <img src="thumb1.jpg" alt="" /></a></li>
        <li><a href="/image2.jpg">
         <img src="thumb2.jpg" alt="" /></a></li>
    </ul>
</div>
<div id="gallery-controls">
    <a href="#" id="gallery-prev">
     <img src="images/prev.png" alt="" /></a<
    <a href="#" id="gallery-next">
     <img src="images/next.png" alt="" /></a>
</div>

• #gallery-wrap видимая область
• #gallery неупорядоченный список
• #gallery-controls стрелки-контроллеры

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

Стили CSS

Важно установить для #gallery - position:relative, для #gallery-wrap - overflow:hidden.

CSS

#gallery-wrap
{margin: 0 auto; overflow: hidden; width: 732px;
                            position: relative;}
#gallery
{position: relative; left: 0; top: 0;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img
{border: 4px solid #40331b; height: 175px; width: 160px;}
#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}

jQuery/Javascript

JQuery

$(document).ready(function(){ 

// Галлерея
if(jQuery("#gallery").length){

// Объявляем переменные
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);

jQuery("#gallery").width(totalWidth);

jQuery("#gallery-prev").click(function(){
if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});

jQuery("#gallery-next").click(function(){
if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}

});

Описание переменных:

totalImages = jQuery(‛#gallery > li‛).length

Возвращает число равное количеству элементов li, причем только дочерних по отношению к тегу с id=’gallery’.

imageWidth = jQuery(‛#gallery > li:first‛).outerWidth(true)

Возвращает полную ширину элемента. Полная ширина = ширина + границы + отступы + поля.

totalWidth = imageWidth * totalImages

Возвращает суммарную ширину всех изображений.

visibleImages = Math.round(jQuery(‛#gallery-wrap‛).width() / imageWidth)

Ширину блока #gallery-wrap делим на ширину изображения. Полученное значение округляем до целого числа.

visibleWidth = visibleImages * imageWidth

Вычисляем видимую область.

stopPosition = (visibleWidth – totalWidth)

Позиция останова вычисляется вычитанием от общей ширины видимой ширины.

Принцип работы jQuery/javascript:

1. Когда дерево тегов (DOM) загружено
2. Если #gallery существует
3. Объявить переменные.
4. Установим ширину элементу #gallery (она будет равна суммарной ширине всех изображений). Это сделано, чтобы слайд-эффект работал должным образом.
5. Когда кто-то кликает по элементу #gallery-prev
6. Если свойство left меньше нуля и элемент #gallery в текущий момент не анимирован.
7. Смещаем элемент #gallery вправо (left : "+=") на полную ширину изображения.
8. Иначе возвращаем false, тем самым отменяем обычное поведение мышки.
9. Когда кто-то кликает по элементу #gallery-next
10. Если значение свойства left больше значение позиции останова и элемент #gallery в текущий момент не анимирован.
11. Смещаем элемент #gallery влево (left : "-=") на полную ширину изображения.

На этом все. Надеюсь, вы нашли в этой статье что-нибудь полезное.

источник