Представляем многофункциональный слайдер на dle9.com Slider Pro - адаптивный jQuery слайдер с возможностью поддержки миниатюр и других настроек, а также собственное API.
Подключаем файл стилей CSS:
<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>Пример разметки для вставки слайдера HTML:
<div class="slider-pro" id="my-slider">
<div class="sp-slides">
<!-- Slide 1 -->
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg"/>
</div>
<!-- Slide 2 -->
<div class="sp-slide">
<p>Lorem ipsum dolor sit amet</p>
</div>
<!-- Slide 3 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
</div>
</div>
Подключаем необходимые скрипты JS:
<script src="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>Выполняем инициализацию плагина:
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$( '#my-slider' ).sliderPro();
});
</script>Более подробно о слайдере и его использовании можно найти на гидхабе. Ссылка ниже.
Скачать из раздела разные навороты для дле Slider Pro - адаптивный слайдер с миниатюрами: