Качественный слайдер на jQuery для сайта
Многие web-мастера часто сталкиваются с задачами различной сложности. Некоторые из них решаемы, а некоторые – нет. Так давайте решим нерешаемые задачи вместе, не будет придумывать велосипед заново и просто воспользуемся готовым слайдером для сайта на jQuery.
Часто мы встаем перед задачей найти самый лучший слайдер, который бы соответствовал всем нашим требованиям, был бы не ресурсоемким для посетителя сайта и имел достаточный функционал. Именно таким является Orbit Slider.
Функциональность представленного Орбит Слайдера является практически стандартной. Он имеет кнопки навигации, красиво пролистывающийся контент (картинки или html код), анимированную полосу указывающую через сколько будет просмотр следующего слайда с возможностью нажать на паузу, а потом снова воспроизвести.
Как работает Orbit Slider?
Для начала подключим CSS стили:
<link rel="stylesheet" href="/../orbit-1.2.3.css">
<link rel="stylesheet" href="/demo-style.css">
Затем необходимо подключить JS:
<script type="text/javascript" src="/../jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/../jquery.orbit-1.2.3.min.js"></script>
А также не забыть указать слайдеру, как называется контейнер, который отвечает за него:
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
где #featured - это id контейнера, в котором лежит содержимое слайдера.
Код самого слайдера выглядит так:
<div id="featured">
<div class="content" style="">
<h1>Orbit does content now.</h1>
<h3>Highlight me...I'm text.</h3>
</div>
<a href="/"><img src="/dummy-images/overflow.jpg" /></a>
<img src="/dummy-images/captions.jpg" data-caption="#htmlCaption" />
<img src="/dummy-images/features.jpg" />
</div>
Теперь, если ты хочешь добавить описание для картинки то необходимо также создавать дополнительные объекты:
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span></div>
То есть: как ты видишь, в третьем изображении есть такая директива: data-caption="#htmlCaption". Она указывает на то, что данные описания картинки нужно брать из span у которого класс orbit-caption, а id="htmlCaprion". Конечно, авторы немного заморочились с этим, но хочешь красивости - получай.
На самом деле, все проще, чем кажется. Просто следуй инструкциям выше и посмотри DEMO ниже. Ты можешь открыть исходный код, нажав клавиши Crtl+U, когда откроешь страницу демонстрации. В настройках самого слайдера можно увидеть следующее:
animation:"horizontal-push", - тип анимации слайдера
animationSpeed:600, - время анимации слайдера
timer:!0, - отображать ли таймер (значения !0 и !1)
advanceSpeed:4E3, - не знаю, но тоже какая-то скорость
pauseOnHover:!1, - показывать паузу, когда мышь на объекте
startClockOnMouseOut:!1, - стартовать таймер, когда мышь ушла с объекта
startClockOnMouseOutAfter:1E3, - странные параметры
directionalNav:!0 - что-то о навигации
captions:!0, - показывать ли описания
captionAnimation:"fade", - тип анимации описаний
captionAnimationSpeed:600 - время анимации описаний
все эти данные находятся в файле: orbit-1.2.3/jquery.orbit-1.2.3.min.js