Адаптивный слайдер на всю ширину монитора с очень ясным и простым кодом
Здравствуйте, друзья. Нашел у себя в заначке (в папке "Выложить на сайт") вот такой ништяковский слайдер для сайта. Очень простой, но самый нужный. Слайдер имеет адаптивную верстку под мобильные устройства, поэтому на любом разрешении слайдер будет смотреться адекватно: изображения указаны в процентном пропорциональном соотношении, стрелки и навигация уменьшаются в размерах, а анимация не глючит. Также я проверил: слайд-шоу работает во всех современных браузерах версиях годовой давности. Думаю он работает нормально и в IE8.
Описывать слайдер не имеет большого смысла, так как он действительно очень прост: слайды с позиционированием по центру, стрелки по бокам, прижатые к стенкам браузера. Также есть навигация в виде буллитов снизу. Все прекрасно работает, я имею ввиду анимацию. Никаких глюков, неровностей и кривостей я не заметил. Слайдер весит немного, а вставить его в Ваш сайт не составит никакого труда.
Инструкции к вставке на сайт
1. Скачиваем файл
Качаем файл, разархивируем его, и заливаем в корень сайта папки images, css и js.
2. Подключаем скрипты и стили
Мужду тегами <head></head> вставляем следующий код
<link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script>
тем самым мы подключили скрипты и файл modernizr.custom.js, который отвечает за правильную работу HTML5 и CSS3 в вашем браузере и браузерах посетителей вашего сайта. В файлах default.css и component.css присутствуют атрибуты и параметры, которые могут внести изменения в дизайн вашего сайта. Если такое происходит винить можно файл default.css, так как там содержаться стили для таких стандартных параметров как body, a и так далее. Просто удаляете то, что конфликтует и все будет нормально.
3. Вставляем код слайдера
На страницу, где вы хотите видеть слайдер и куда вы подключили скрипты и стили, вставляете html код слайдера:
<div class="container">
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt="img01"/></a></li>
<li><a href="#"><img src="images/2.jpg" alt="img02"/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="img03"/></a></li>
<li><a href="#"><img src="images/4.jpg" alt="img04"/></a></li>
<li><a href="#"><img src="images/5.jpg" alt="img05"/></a></li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.cbpFWSlider.min.js"></script>
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpFWSlider( [options] );
- options:
{
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease'
}
- destroy:
$( selector ).cbpFWSlider( 'destroy' );
*/
$( '#cbp-fwslider' ).cbpFWSlider();
} );
</script>
Слайдер подключен
На этом у меня все. Хорошей и продуктивной работы. Добро!
Комментарии ()