Простейший слайдер на JQuery от NiceSEO!

Приветствую, друзья! Сегодня ничё интересного, будем делать обычный слайдер, но очень оптимизированный, быстро работающий, и с минимумом кода. Поехали!

Сначала хочу пооффтопить — niceseo2.ru отличается уникальными «хаками», данная же статья к ним не относится, таких «уроков» тысячи по инету, и написана больше мною для себя, т.к. ставить слайдеры приходится уже не то, что на каждый сайт, а на каждый сайт не по разу.

Код простой, понятный и легко кастомизируемый как в плане дизайна, так и в плане количества слайдов и т.д. Если для вас важно, чтобы такая мелочь, как слайдер весила 2кб а не 200, то рекомендую разобраться, а не пользоваться всякими там сторонними.

Итак. К примеру нам нужен слайдер в 5 слайдов, шириной в 1009px, высотой в 364px и выглядящий как-то так (кликабельно):

0314

Функции стандартны:

  • Каждые 4 секунды слайд листается на следующий, происходит это с анимацией, всё красиво, после пятого слайда идёт снова первый
  • Когда мышка попадает в область действия слайдера — автолистание останавливается. Когда мышка уходит соответственно пауза убирается
  • Ну и, разумеется, при клике на кнопку «слайд номер 2», с анимацией переходим на второй слайд

В общем вот весь код HTML:

И CSS:

И вот исходник с примером, качайте, смотрите, всё внатуре просто как дважды два.

И да, если у вас не 5 слайдов а другое число, то в двух местах в коде:

измените 5 на ваше число слайдов.

Этот же код, кстати, стоит вот на данной странице справа, где «об авторе».

P.S. В ближайшем будущем я допилю эту наработку до полноценного модуля для джумлы. Как и обычно у меня это бывает — с максимальной оптимизацией и быстротой работы!

За сим всё. С вами был linur, красивых вам слайдеров!

 

 

Пишем слайдеры сами
Вот это уровень!Лучше использовать готовые

Оцените статью!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Для отправки сообщения выберите лишнее изображение