Плагин 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 структуре.
Комментарии
Спасибо за слайдер, очень крутой.
Уточните как именно "обрезались" и как "центрировались ". Вариантов может быть множество.
RSS лента комментариев этой записи