Демонстрация Загрузить
Поскольку сейчас популярен минимализм и при этом важным требованием к дизайну сайтов является адаптивность всех элементов, то я решил найти какой-нибудь простой в установке слайдер, при этом функциональный - но не тяжелый, и обязательно адаптивный - сам подстраивающийся под разные размеры экранов. Так же слайдер изначально задуман как полноэкранный и при этом все его элементы управления и оформления сведены к минимуму и упрощены - чтоб не напрягать глаза. Хотя естественно, при необходимости, и размеры и оформление - можно настроить как угодно.

Пока не нашел этот - перепробовал немало других, но везде были серьезные недостатки: какие-то слишком много весили или были сложны в установке. Почти у всех косяком было то, что нужно было чтоб картинки были одних пропорций и размеров, а иначе один слайд - размеры слайдера такие, а переключаешь на другой слайд где картинка других пропорций - и весь слайдер становиться другого размера, а если задаешь фиксированный размер - то картинки искажаются. Здесь все по другому, если картинки слайдов разные по ширине - они автоматически растягиваются, а если разные по высоте - то не влезающие части скрываются и отображается центральная, а не тупо сжимаются искажаясь. Хотя можно сделать и так чтоб сжимались, в общем можно сделать как угодно - и все довольно просто.

Установка слайдера

1. Скачайте архив. Создайте в корне файлового менеджера папку fw-slider, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлу скрипта и стилей, а также скрипт вызова с настройками. Ставим это все перед </body>:
<link rel="stylesheet" type="text/css" href="/fw-slider/style-bullets.css"/>
<script type="text/javascript" src="/fw-slider/wowslider.js"></script>
<script type="text/javascript">
jQuery('#wowslider-container1').wowSlider({
effect: "parallax", // анимация слайдов, варианты: turn, shift, cube over, louvers, lines, carousel, dribbles, parallax, brick, collage, basic, basic linear, blast, blinds, blur, book, bubbles, carousel basic, cube, domino, fade, flip, fly, glass parallax, kenburns, page, photo, rotate, seven, slices, squares, stack, stack vertical, tv
duration: 6*100, // скорость анимации
delay: 30*100, // скорость смены слайдов
width: 1360, // разрешение по горизонтали
height: 768, // разрешение по вертикали
autoPlay: true, // авто-прокрутка: вкл/выкл
playPause: true, // кнопка паузы: вкл/выкл
stopOnHover: false, // паузы при наведении на слайд: вкл/выкл
caption: true, // подпись слайдов: вкл/выкл
captionEffect: "parallax", // анимация подписи, варианты: turn, shift, cube over, louvers, lines, carousel, dribbles, parallax, brick, collage, basic, basic linear, blast, blinds, blur, book, bubbles, carousel basic, cube, domino, fade, flip, fly, glass parallax, kenburns, page, photo, rotate, seven, slices, squares, stack, stack vertical, tv
controls: true, // стрелки влево и вправо: вкл/выкл
fullScreen: true, // полноэкранный режим: вкл/выкл
});
</script>
** Настройки (то что можно менять или удалять) я специально подписал.

3. И сам блок слайдера, ставите в нужное место:
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="ссылка на полное изображение 1" title="заголовок 1"/>описание 1</li>
<li><img src="ссылка на полное изображение 2" title="заголовок 2"/>описание 2</li>
<li><img src="ссылка на полное изображение 3" title="заголовок 3"/>описание 3</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#"><img src="ссылка на уменьшенное изображение 1" height="80"/></a>
<a href="#"><img src="ссылка на уменьшенное изображение 2" height="80"/></a>
<a href="#"><img src="ссылка на уменьшенное изображение 3" height="80"/></a>
</div>
</div>
<div class="ws_shadow"></div>
</div>
** Оформление и все размеры - настраиваются в css.

Принцип думаю понятен, тут особо ничего объяснять не нужно. Поясню лишь то, что блок кнопок/миниатюр - имеет два принципиально разных типа отображения: кнопки - при наведение на которые всплывают миниатюры (как в этом примере), и полноценные миниатюры. Если вам нужны кнопки - идентификатор блока миниатюр указываете ws_bullets и файл стилей тот что в этом примере, а если нужны полноценные миниатюры - меняете идентификатор на ws_thumbs и файл стилей меняете на style-thumbs.css (он есть в архиве).

Сами миниатюры в обоих вариантах можно прописывать одинаково, так как показано в примере. Но если вам сами миниатюры вообще не нужны, а нужны допустим только кнопки, то блоки img с изображениями - лучше вообще убрать и оставить только сами ссылки, так и код сократиться и весить будет меньше. А если вообще даже кнопки не нужны, то можно весь блок ws_bullets (или ws_thumbs) убрать.

Слайдер на самом деле очень серьезный, и тут я не смогу все показать. Больше информации можно найти на офф-странице, там можно посмотреть кучу других разных примеров того как он может выглядеть и работать, и скачать утилиту-конструктор для удобного создания своей конфигурации слайдера.
Комментарии
avatar
0
2
А ларчик просто открывался! а я себе всю голову сломала biggrin СПАСИБО! за оперативный ответ и отличный слайдер!
avatar
0
3
Не за что, обращайтесь еще
avatar
0
1
все работает просто замените в СSS картинку Доступно только для пользователей
avatar