Jssor Slider – легкий и адаптивный слайдер фотографий для сайта на jQuery
Привет, друзья! Первое, что бы хотелось сделать – это поздравить вас с Новым годом! С новыми силами и целями на этот год мы продолжаем радовать наших посетителей только качественным контентом.
Еще до нового года довелось мне поработать над одной очень интересной задачей. Подробно о ней сегодня я говорить не буду, но скажу вам, что частично она связана с оформлением статей на сайте. Так вот, мне был необходим слайдер, простой и без лишнего веса (суперские эффекты мне не нужны), а также с подстраиванием под любой экран (адаптив). При поиске информации в Интернете мне приглянулся весьма интересный экземпляр под названием «Jssor Slider».
Что умеет и какие преимущества для себя я отметил в этом слайдере?
- Адаптивность (автоматически подстраивается под любое разрешение экрана).
- Кроссбраузерность (поддерживает все популярные браузеры, включая очень ранние релизы и мобильные версии).
- Тройная навигация: это стрелки, точки и перелистывание по типу Touch & Drag (перелистывание для сенсорных устройств).
- Бесконтактная установка нескольких слайдеров на одной странице.
- Легкая установка и использование (что немаловажно в нашем деле).
- Ширина слайдера зависит от родительского элемента, в котором он находится, а высота рассчитывается автоматически.
Сразу отмечу, что для того чтобы ваша страница не прыгала при переключении слайдов, рекомендуется использовать только одинаковые по размеру изображения, например, 1300x500 px.
Начнем установку?
1. Скачайте архив в конце статьи. Разархивируйте и содержимое загрузите на сайт удобным для вас способом.
2. Далее, если у вас на сайте отсутствует библиотека jQuery, – подключите ее в секции HEAD:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>3. Следующим шагом вы выполняете подключение скриптов слайдера:
<script src="/js/jssor.slider-22.2.6.min.js"></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if(refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
} else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
};
jssor_1_slider_init();
</script>Делать это желательно перед закрывающим тегом </body>.
4. В ваш файл стилей, в самый конец, вставьте:
.slides_jssor {
cursor: default;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.loading_jssor {
position: absolute;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, .7);
}
.jssor_main {
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
overflow: hidden;
visibility: hidden;
}
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
width: 16px;
height: 16px;
background: url("/img/b05.png") no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
background-position: -97px -7px;
}
.jssora22l, .jssora22r {
display: block;
position: absolute;
width: 40px;
height: 58px;
cursor: pointer;
background: url("/img/a22.png") center center no-repeat;
overflow: hidden;
}
.jssora22l {
background-position: -10px -31px;
top: 0px;
left: 8px;
width: 40px;
height: 58px;
}
.jssora22r {
background-position: -70px -31px;
top: 0px;
right: 8px;
width: 40px;
height: 58px;
}
.jssora22l:hover {
background-position: -130px -31px;
}
.jssora22r:hover {
background-position: -190px -31px;
}
.jssora22l.jssora22ldn {
background-position: -250px -31px;
}
.jssora22r.jssora22rdn {
background-position: -310px -31px;
}
.jssora22l.jssora22lds {
background-position: -10px -31px;
opacity: .3;
pointer-events: none;
}
.jssora22r.jssora22rds {
background-position: -70px -31px;
opacity: .3;
pointer-events: none;
}
.loading_jssor_div_1 {
filter: alpha(opacity=70);
opacity: .7;
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.loading_jssor_div_2 {
position: absolute;
display: block;
background: url("/img/loading.gif") no-repeat center center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}5. И завершающим этапом вставляете верстку слайдера в нужное место на вашем сайте:
<div id="jssor_1" class="jssor_main" style="width: 1300px;height: 500px;">
<div data-u="loading" class="loading_jssor">
<div class="loading_jssor_div_1"></div>
<div class="loading_jssor_div_2"></div>
</div>
<div data-u="slides" class="slides_jssor" style="width: 1300px;height: 500px;">
<div>
<img data-u="image" src="/img/blue.jpg" />
</div>
<div>
<img data-u="image" src="/img/purple.jpg" />
</div>
<div>
<img data-u="image" src="/img/red.jpg" />
</div>
</div>
<div data-u="navigator" class="jssorb05" data-autocenter="1" style="bottom: 16px;right: 16px;">
<div data-u="prototype" style="width: 16px;height: 16px;"></div>
</div>
<span data-u="arrowleft" class="jssora22l" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" data-autocenter="2"></span>
</div>Здесь каждый слайд отделен с помощью тега div:
<div>
<img data-u="image" src="/img/red.jpg" />
</div>То есть по такому же принципу вы добавляете новые слайды. По необходимости можете добавить сопутствующий текст слайдам внутри тега div.
На этом все. А если у вас остались вопросы или вы столкнулись с какими-то трудностями при работе с описанным слайдером – не стесняйтесь и пишите об этом в комментариях под данной статьей.
