Делаем слайдер для сайта на jquery

Часто по работе приходится встраивать в страницу слайдеры прокрутки изображений, блоков и т.д. Наигравшись с «чужими» разработками, которые часто обладают лишним и ненужным мне функционалом было решено сделать свой велосипед и оформить его в виде плагина для jQuery, который бы банально выполнял свои функцию горизонтального слайдера, и был бы мне понятен От и До.

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

Сначала нужно изучить правила оформления плагина для jQuery. Я пользовался информацией по этой ссылке. Откуда я узнал, что для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.pluginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.lbslider.js — именно так я решил назвать свой слайдер, почему lb не понятно никому, кроме моей любимой невесты (нужно же, чтобы была хоть какая-то загадка). Сам же код плагина должен иметь такое оформление (более подробно можно почитать по ссылке выше):

Для начала я решил использовать такие параметры в своей реализации:
leftBtn — кнопка для прокрутки слайдера влево
rightBtn — кнопка для прокрутки слайдера влево
quantity — количество видимых элементов на странице (иногда их нужен всего 1, а иногда и 3, 4 и более)
autoPlay — булевое значение, указывающее, нужна ли автопрокрутка слайдера
autoPlayDelay — задержка при автопрокрутке

Итак, вот мои опции по умолчанию:

Теперь приступим непосредственно к реализации. Я решил что html код слайдера будет состоять из блока-обертки, внутри которого будут находится кнопки для прокрутки и еще один блок со списком <ul>, элементы которого и будут проркучиваться. Сначала добавим несколько стилей.

Прокрутку решено было сделать бесконечной, для этого продублируем несколько элементов с конца вначале и несколько первых элементов в конце. Несколько — это как раз количество наших видимых элементов на странице — параметр quantity.

Если Вы заметили, мы также сохранили первоначальное количество элементов в переменной elRealQuant — оно нам еще пригодится. Далее установим ширину одного элемента, она зависит от ширины всего блока и от количества видимых элементов, также установим CSS свойство float: left. Узнаем новое количество всех элементов, после того, как мы продублировали некоторые из них и установим ширину всего списка равной количеству элементов умноженному на ширину одного элемента.

Мы также сдвинули весь список влево, чтобы добавленные в начало дублированные элементы были не видны при загрузке страницы.

Теперь добавим функции отключения кнопок прокрутки на время самой анимации прокручивания и последующего их включения. Это будет просто элементарное добавление/убирание класса inactive к кнопкам, а по нажатии на кнопки будем проверять, если этот класс есть — ничего не делать. Конечно также можно задать отдельное стилевое оформление для таких кнопок.

Теперь напишем собственно функции, которые будут отрабатывать по нажатии кнопок прокрутки слайдера:

Это функция для левой кнопки. Сначала мы отключаем кнопки, затем соответственно проводим саму анимацию прокрутки и потом снова делаем активными кнопки. По окончании анимации проверяем, если слайдер дошел до левого края — перемещаем весь блок снова на нужное количество вправо — пользователь на экране не увидит этого и снова можно будет листать влево — и так до бесконечности. Функция для правой кнопки будет аналогичной, только прокручивать будем в другую сторону и проверять будем, если прокрутили до правого края — сдвигать влево.

Осталось только сделать автопрокрутку, если таковая задана. Вобщем это будет просто периодическая эмуляция нажатия на одну из кнопок. Также при наведении на слайдер прокрутка будет останавливаться, а при убирании курсора — возобновляться.

Ну вот собственно и все.

И вызывается он довольно просто. Примерно вот так:

 .

The simple act of writing down a few words will help writepaper4me.com/ to fix the idea in your mind so your subconscious can get hold of it
Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©