Простой слайдер изображений на jQuery. Введение
Как я уже неоднократно говорил, интернет стремительно развивается, сайты становятся более интерактивными и зрелищными, декорированными. На сайтах зачастую можно встретить всевозможные карусели, слайдеры, бегущие строки и тд. Про один из таких элементов сайта я и хотел бы рассказать в этой статье — про слайдер для сайта. Существует много всевозможных библиотек, которые позволяют быстро создавать слайдеры. Но это слишком просто — взять готовое и влепить на сайт. Да и толку от этого ноль. Поскольку при использовании готовых решений, навыки программиста ни как не улучшаются. Другое дело написать самому, вникнуть в суть задачи, поэтому я и хочу показать как можно реализовать простой слайдер изображений на jQuery своими руками, без сторонних библиотек, ну кроме jQuery, конечно.
В этой статье, слайдер визуально не будет блистать красотой, зато хорошо отразит смысл работы слайдера. Все что нам понадобиться — это два div`a, один из них будет иметь css свойство overflow: hidden, которое позволяет скрывать все, что находится за рамками элемента. И второй див будет иметь динамическую ширину, которая будет высчитываться в зависимости от количества картинок-слайдов. Картинку будут находиться внутри дива с динамической длинной, а он в свою очередь будет помещен в див, который скрывает все, что находится за его пределами.
Далее нам останется с помощью javaScript только двигать див, с картинками — это создаст иллюзию одновременного перемещения всех картинок.
Простой слайдер изображений на jQuery. Код
А теперь самая главная часть статьи — код. Начнем с верстки:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Простой слайдер изображений на jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.left_arrow{
float: left;
width: 40px;
display: block;
text-align: center;
cursor: pointer;
margin-top: 25px;
}
.right_arrow{
float: left;
width: 40px;
display: block;
text-align: center;
cursor: pointer;
margin-top: 25px;
}
.carusel_show_div{
float: left;
width: 200px;
height: 70px;
overflow: hidden;
border: 1px solid #000;
}
.one_slide{
width: 44px;
height: 64px;
margin: 2px;
border: 1px solid #F00;
float: left;
}
.one_slide span{
text-align: center;
font-size: 10px;
line-height: 8px;
display: block;
}
.carusel_big_div{
position: relative;
left: 0px;
}
</style>
</head>
<body>
<h2>Простой слайдер изображений на jQuery</h2>
<div class="carusel_div">
<span class="left_arrow">◄◄</span>
<div class="carusel_show_div">
<div class="carusel_big_div">
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
<div class="one_slide">
<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
<span>Любой текст</span>
</div>
</div>
</div>
<span class="right_arrow">►►</span>
</div>
</body>
</html>
И javaScript, который заставит работать наш слайдер:
// При старте карусели
var countAllSlides = 0, // количество картинок всего
marginOneSlide = 6, // отступы между картинками
countShow = 4, // количество отображаемых картинок
speep_animation = 200, // скорость анимации
widthOneSlide, // ширина одной картинки
one_slide, // элемент, картинка
carusel_big_div; // элементы, div, в котором лежат картинки
// функция, которая запускает карусель и записывает значения в нужные переменные
function init_carusel(){
// присваиваем переменным элементы
carusel_big_div = $('.carusel_big_div');
one_slide = $('.one_slide');
// считаем количество всех картинок
one_slide.each(function(e) {
countAllSlides ++;
});
// считаем ширину одной картинки
widthOneSlide = parseInt(one_slide.width());
// считаем ширину дива со всеми картинками, чтоб все влезло
var widthForMainDiv = countAllSlides * (widthOneSlide + marginOneSlide);
// задаем для div`a с картинками нужную ширину
$('.carusel_big_div').width(widthForMainDiv);
}
// действия после полной загрузки страницы
$(document).ready(function(){
// взываем функцию запуска карусели
init_carusel();
// действие при клике по кнопке "влево"
$('.left_arrow').click(function(){
// определяем положение div`a с картинками
var left = carusel_big_div.css('left');
var leftInt = parseInt(left.replace('px',''),10);
// высчитываем новое положение для div`a
var newLeft = leftInt + (marginOneSlide + widthOneSlide);
// проверяем есть куда двигать картинки или нет
if(newLeft < (marginOneSlide + widthOneSlide)){
// двигаем все картинки. Смещается div, с картинками
carusel_big_div.animate({
left: newLeft + 'px'
}, speep_animation);
}
});
// действие при клике по кнопке "вправо"
$('.right_arrow').click(function(){
var maxWidth = (countAllSlides - countShow)*(marginOneSlide+widthOneSlide);
var left = carusel_big_div.css('left');
var leftInt = parseInt(left.replace('px',''),10);
var newLeft = leftInt - (marginOneSlide+widthOneSlide);
if(maxWidth>=(-1*newLeft)){
carusel_big_div.animate({
left: newLeft+'px'
}, speep_animation);
}
});
});
На этом все, прикладываю исходники — сюда.
