Вы находитесь здесь:Плагины jQuery»liSlidik - jQuery Responsive Slider или адаптивный слайдер на jQuery

liSlidik - jQuery Responsive Slider или адаптивный слайдер на jQuery

Среда, 14 Ноябрь 2012 23:24 Автор 

Плагин liSlidik прекрасно подойдет и для тех кому требуется вставить адаптивное слайд-шоу не задавая лишних вопросов, и для тех кто любит покопаться в коде слайдера чтобы настроить под себя внешний вид. Все функциональные элементы адаптивной галереи liSlidik реализованы так, чтобы можно было без проблем менять её HTML структуру. Это достигается тем что вся навигация по адаптивному слайдеру взаимодействует друг с другом через data-атрибут, в котором указывается идентификатор самого слайдера.
Неожиданно для нас самих liSlidik получился очень универсальный. На его основе можно собрать слайдер любого внешнего вида
В архиве с демо-примерами уже есть несколько готовых решений по оформлению слйдера. Для подключения готовой темы, подключите соответствующий ей CSS файл.

Пример работы на JSFIDDLE

Подключаемые файлы

Подключаем CSS "liSlidik"

<link rel="stylesheet" href="#">

Если вы хотите использовать готовую тему, подключите дополнительно соответствующий этой теме CSS-файл, например "liSlidik.blackClasic.css":

<link rel="stylesheet" href="#">

Подключаем библиотеку "jQuery" и плагин "liSlidik":


    <script src="/js/jquery-1.8.min.js"></script>

    
    <script src="/js/jquery.liSlidik.js"></script>

Структура HTML

Вот простейший пример HTML кода слайдера из которого видно как взаимодействуют между собой функциональные элементы сайта.
Те элементы навигации, которые вам не нужны, можно не вставлять в код страницы
Любой элемент навигации слайдера может находиться как внутри родительского блока ".slidik", так и за его пределами

    
    <ul id="slide_0" class="slidik">
        <li class="show"><img alt="caption content 1" src="/pic/1.jpg"></li>
        <li><img alt="caption content 2" src="/pic/2.jpg"></li>
        <li><img alt="caption content 3" src="/pic/3.jpg"></li>
        <li><img alt="#htmlcaption_N" src="/pic/4.jpg"></li>
    </ul>
    
    <a data-slidik="slide_0" class="next" href="#">Next</a>
    <a data-slidik="slide_0" class="prev" href="#">Prev</a>
    <div data-slidik="slide_0" class="thumbs"></div>
    <div data-slidik="slide_0" class="dotted"></div>
    <div data-slidik="slide_0" class="caption"></div>
    <div id="htmlcaption_N" class="captionContent">
       <a href="#">caption content 4</a>
    </div>

Инициализация плагина

$('#slide_0').liSlidik({
    /*
    false - чтобы выключить слайд-шоу, 
    или целое число (милисекунды) - чтобы включить 
    и задать время между сменой слайдов
    */
    auto:3000, 

    /*
    Число, определяющие, как долго будет протекать 
    анимация смены слайда (в миллисекундах)
    */    
    duration: 1000
});

Баг-фиксы

27.04.13 #3 Добавлены новые темы для слайдера
27.04.13 #2 Добавлена возможность выводить миниатюры слайдов (привью, thumbnails) в качестве навигации
27.04.13 #1 Нвигация слайдера теперь полностью независима от самого слайдера в DOM структуре.

Прочитано 18204 раз Последнее изменение Воскресенье, 30 Март 2014 17:08
Оцените материал
(4 голосов)

Комментарии   

 
Уроки Wordpress
# Уроки Wordpress 08.12.2012 07:36
Отличный слайдер, добавил в закладки на заметку!
Ответить | Ответить с цитатой | Цитировать
 
 
ingram
# ingram 27.10.2013 17:35
Слайдер отличный! Лёгкий и простой в установке. Автор большой молодец! Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
Иван
# Иван 03.01.2014 21:38
Добрый день, возможно ли сделать чтобы в слайдере SLIDIK THUMBS, нижние картинки обрезались и центрировались.
Спасибо за слайдер, очень крутой.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 04.01.2014 15:31
Цитирую Иван:
Добрый день, возможно ли сделать чтобы в слайдере SLIDIK THUMBS, нижние картинки обрезались и центрировались.
Спасибо за слайдер, очень крутой.

Уточните как именно "обрезались" и как "центрировались ". Вариантов может быть множество.
Ответить | Ответить с цитатой | Цитировать
 
 
Иван
# Иван 04.01.2014 20:56
Например картинка из верхнего слайда, чтобы автоматически снизу была обрезана по центру 100px на 100px, а не сжималась.
Ответить | Ответить с цитатой | Цитировать
 
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliSlidik - jQuery Responsive Slider или адаптивный слайдер на jQuery