Slider Pro

Категория: Хаки DLE » Сборник разных хаков
Slider Pro
Представляем многофункциональный слайдер на www.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 - адаптивный слайдер с миниатюрами:
  • 80
Рубрика: DLE хаки » Разные навороты
Ранее » DLE Изменяем scrollbar без использование Java Script« Далее Scrollify — слайдер для тач-устройств
Добавление комментарияОставить комментарий