Flexslider — бесплатный jQuery-слайдер
Перечисли его особенности, которые делают этот слайдер одним из лучших:
Основные особенности слайдера:
- адаптируемый к любым разрешениям дизайн;
- горизонтальные/вертикальные слайды;
- любые HTML-элементы в качестве слайдов;
- использование собственных CSS стилей;
- поддержка устройств на iOS и Android;
- в архиве есть пример страницы с интегрированным слайдером;
- слайдер протестирован на совместимость с браузерами Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10+, IE7+.
И так приступим к его изучению и написанию кода.
HTML
Напишем разметку, она очень проста и вы без труда можете увеличить количество сладов
CSS
Тут ничего особенного нет, просто оформление слайда по умолчанию. Вы без труда сможете поменять его если вам нужно.
Ну а теперь jQuery
Для более тонкой настройки распишу что есть что:
Основные особенности слайдера:
- адаптируемый к любым разрешениям дизайн;
- горизонтальные/вертикальные слайды;
- любые HTML-элементы в качестве слайдов;
- использование собственных CSS стилей;
- поддержка устройств на iOS и Android;
- в архиве есть пример страницы с интегрированным слайдером;
- слайдер протестирован на совместимость с браузерами Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10+, IE7+.
И так приступим к его изучению и написанию кода.
HTML
Напишем разметку, она очень проста и вы без труда можете увеличить количество сладов
Код
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg">
</li>
<li>
<img src="slide2.jpg">
</li>
<li>
<img src="slide3.jpg">
</li>
</ul>
</div>
<ul class="slides">
<li>
<img src="slide1.jpg">
</li>
<li>
<img src="slide2.jpg">
</li>
<li>
<img src="slide3.jpg">
</li>
</ul>
</div>
CSS
Тут ничего особенного нет, просто оформление слайда по умолчанию. Вы без труда сможете поменять его если вам нужно.
Код
<link rel="stylesheet" href="flexslider.css">
Ну а теперь jQuery
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script src="jquery.flexslider.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Для более тонкой настройки распишу что есть что:
Код
animation: "fade", //Вид анимации
slideDirection: "horizontal", //Расположение слайда горизонтально/вертикально
slideshow: true, //Авто проигрывание
useCSS: true, //Использовать CSS3 переходы, если есть
touch: true, //Переключать слайды при использовании тача(переключение пальцем на сенсорном экране)
slideshowSpeed: 7000, //Скорость переключения слайдов(задается в милисекундах)
animationDuration: 600, //Скорость анимации(задается в милисекундах)
directionNav: true, //Стрелки навигации (Вперед/Назад)
controlNav: true, //Подслайдовая навигация (в виде точек)
keyboardNav: true, //Перелистывание слайдов при помощи клавиатуры(Влево/Вправо)
mousewheel: false, //Перелистывание слайдов при помощи колеса мыши
prevText: "Previous", //Текст написанный на кнопке "Назад"
nextText: "Next", //Текст написанный на кнопке "Вперед"
pausePlay: false, //Создание паузы / воспроизведения динамического элемента
randomize: false, //Случайный вывод слайдов
pauseOnAction: true, //Приостановить показ слайдов при взаимодействии с элементами управления, настоятельно рекомендуется.
pauseOnHover: false, //Остановить слайдер при наведении курсора мыши
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
slideDirection: "horizontal", //Расположение слайда горизонтально/вертикально
slideshow: true, //Авто проигрывание
useCSS: true, //Использовать CSS3 переходы, если есть
touch: true, //Переключать слайды при использовании тача(переключение пальцем на сенсорном экране)
slideshowSpeed: 7000, //Скорость переключения слайдов(задается в милисекундах)
animationDuration: 600, //Скорость анимации(задается в милисекундах)
directionNav: true, //Стрелки навигации (Вперед/Назад)
controlNav: true, //Подслайдовая навигация (в виде точек)
keyboardNav: true, //Перелистывание слайдов при помощи клавиатуры(Влево/Вправо)
mousewheel: false, //Перелистывание слайдов при помощи колеса мыши
prevText: "Previous", //Текст написанный на кнопке "Назад"
nextText: "Next", //Текст написанный на кнопке "Вперед"
pausePlay: false, //Создание паузы / воспроизведения динамического элемента
randomize: false, //Случайный вывод слайдов
pauseOnAction: true, //Приостановить показ слайдов при взаимодействии с элементами управления, настоятельно рекомендуется.
pauseOnHover: false, //Остановить слайдер при наведении курсора мыши
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
-
FalleN -
4192 -
1 -
323
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...