NiceSEO’s VKontakte Crossposter

Бесплатный плагин для Wordpress для автоматического кросспостинга в паблик ВКонтакте

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

jquerysliderniceseoru

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

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

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

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

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

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

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

И CSS:

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

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

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

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

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

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

 

 

Статью подготовил linur, Специально для NiceSEO.ru, 30 января 2014 года. При копировании не забывайте о ссылке на источник.

Ключевые слова: , , ,

Я также состою в:
Лучшая веб-студия!
Яндекс.Метрика
© 2011-2018 NiceSeo.ru