Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.


Простой jQuery слайдер . Часть 2.

Добрый день всем читателям и подписчикам heavenweb.ru. В одной их прошлых статей я рассказывал как сделать несложный jQuery слайдер. Его код был компактным и простым, однако, скрипт имел некоторые недостатки. В этой статье мы рассмотрим как можно расширить возможности скрипта, и исправим некоторые баги. Смотрите демо ниже:

ДемоСкачать

 

Итак, какие возможности нам хотелось бы добавить во вторую версию HWSlider?

  • Во первых, хотелось бы иметь возможность вставить несколько таких слайдеров на странице. Иногда возникает такая необходимость, например в первом блоке прокручиваются какие-нибуть баннеры, а во втором – какие-то анонсы статей (текст). Соответственно, нужно предусмотреть возможность оформить каждый слайдер индивидуально.
  • Во вторых, не всегда нужна автоматическая смена слайдов. Нужно дать возможность администратору отключить авто прокрутку в любом из слайдеров.
  • В первой версии HWSlider была возможность отключить ссылки «следующий» и «предыдущий», но не было возможности отключить кнопки перехода на каждый слайд (ещё их называют буллеты).

Ну что ж, с требованиями определились, начнём дорабатывать наш скрипт.

Делаем простой слайдер на jQuery

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

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

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным  и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

ДемоСкачать