Liquid slider – бесплатный слайдер для любого сайта. Поддерживает swipe действия на мобильных, планшетах и ПК.
Собрались создавать сайт? А как же обойтись без слайдера? Сегодня практически любой сайт использует различные слайдеры для сайта. Liquid slider – один из самых удачных примеров слайдера для контента, картинок (изображений), новостей, статей, материалов – да чего угодно! Именно поэтому мы рекомендуем Вам использовать его.
Возможности Liquid slider:
- автоматическая и ручная прокрутка слайдов;
- поддержка мобильных и планшетов;
- swipe действия;
- уменьшение размера слайдов при уменьшении экрана;
- удобные вкладки;
- навигация по слайдам с помощью вкладок или стрелок;
- возможность использовать различное содержимое для сладов;
- красивые CSS и JS эффекты.
Использование слайдера.
/* Добавьте этот код в заголовок <head> */
<link rel="stylesheet" href="/./css/animate.css"> <!-- Optional -->
<link rel="stylesheet" href="/./css/liquid-slider.css">
/* Добавьте в <head> или <footer> */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/./js/jquery.easing.1.3.js"></script>
<script src="/./js/jquery.touchSwipe.min.js"></script>
<script src="/./js/jquery.liquid-slider.min.js"></script>
<script>
/* If installing in the footer, you won't need $(function() {} */
$(function(){
$('#slider-id').liquidSlider();
});
</script>
Сам код слайдера должен быть похож на этот:
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Slide 1</h2>
// здесь код содержимого слайда
</div>
<div>
<h2 class="title">Slide 2</h2>
// здесь код содержимого слайда
</div>
<div>
<h2 class="title">Slide 3</h2>
// здесь код содержимого слайда
</div>
</div>
Контейнер, который отвечает за вызов функций слайдера:
$('#slider-id').liquidSlider();
Изменение настроек, код ниже отключает непрерывное скольжение и изменяет эффект по умолчанию.
$('#slider-2').liquidSlider({
continuous:false,
slideEaseFunction: "easeInOutCubic"
});
Кнопка play будет динамически обновлять контейнеры, чтобы остановить их при нажатии. Для управления скоростью и задержкой используйте внутренний API.
Во-первых, создать кнопку и два ползунка:
<button class="btn">A Pure Button</button>
<input id="range-speed" type=range step=100 min=-5000 max=100 value=-1500>
<input id="range-delay" type=range step=1000 min=-15000 max=100 value=-7000>
Далее, инициализируйте Liquid Slider доступ к внутреннему API, и добавьте функцию контроля автовоспроизведение. Затем обновите переменную настройки. По желанию, Вы можете установить autoSlide к значению по умолчанию и изменения "Stop" и "Start" соответственно.
$('#slider-3').liquidSlider({/*autoSlide:true*/});
$('.btn').on('click', function() {
var api = $.data( $('#slider-3')[0], 'liquidSlider'),
text = $(this).text() === 'Start' ? 'Stop' : 'Start';
if (text === 'Stop')
api.startAutoSlide();
else
api.stopAutoSlide();
$(this).text(text);
});
$('#range-speed').change(function() {
api.options.slideEaseDuration = -$(this).val()
});
$('#range-delay').change(function() {
api.options.autoSlideInterval = -$(this).val()
});
Дополнительные кнопки.
Хэш привязка позволяет сделать ссылку на слайд с внешней страницы, при этом получить содержимое слайда на панели (смотрите как изменяется URL при нажатии на вкладки).
Используйте API для ручного управления слайдами. Для использования API, задействуйте следующий JavaScript. Обратите внимание, что API начинается с 0.
var api2 = $.data( $('#slider-4')[0], 'liquidSlider');
Используйте api2.setNextPanel(2), чтобы переместить слайды к различным позициям и api2.updateClass($(this)), чтобы обновить текущий класс. Обратите внимание, что вместо $(this) Вы можете также использовать класс.
<a href="#" onclick="api2.setNextPanel(0);api2.updateClass($(this))">Слайд 1</a>
<a href="#slide-3" onclick="api2.setNextPanel(2);api2.updateClass($(this))">Слайд 3</a>
<a href="#left" onclick="api2.setNextPanel('left');api2.updateClass($(this))">Влево</a>
<a href="#right" onclick="api2.setNextPanel('right');api2.updateClass($(this))">Вправо</a>
Детальнее: примеры и код слайдера Liquid slider
