Артём Мáлков

Jssor Slider – легкий и адаптивный слайдер фотографий для сайта на jQuery

6 янв10 комм

Привет, друзья! Первое, что бы хотелось сделать – это поздравить вас с Новым годом! С новыми силами и целями на этот год мы продолжаем радовать наших посетителей только качественным контентом.

Еще до нового года довелось мне поработать над одной очень интересной задачей. Подробно о ней сегодня я говорить не буду, но скажу вам, что частично она связана с оформлением статей на сайте. Так вот, мне был необходим слайдер, простой и без лишнего веса (суперские эффекты мне не нужны), а также с подстраиванием под любой экран (адаптив). При поиске информации в Интернете мне приглянулся весьма интересный экземпляр под названием «Jssor Slider».

Jssor Slider – легкий и адаптивный слайдер фотографий для сайта на jQuery

Что умеет и какие преимущества для себя я отметил в этом слайдере?

  1. Адаптивность (автоматически подстраивается под любое разрешение экрана).
  2. Кроссбраузерность (поддерживает все популярные браузеры, включая очень ранние релизы и мобильные версии).
  3. Тройная навигация: это стрелки, точки и перелистывание по типу Touch & Drag (перелистывание для сенсорных устройств).
  4. Бесконтактная установка нескольких слайдеров на одной странице.
  5. Легкая установка и использование (что немаловажно в нашем деле).
  6. Ширина слайдера зависит от родительского элемента, в котором он находится, а высота рассчитывается автоматически.

Сразу отмечу, что для того чтобы ваша страница не прыгала при переключении слайдов, рекомендуется использовать только одинаковые по размеру изображения, например, 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.

На этом все. А если у вас остались вопросы или вы столкнулись с какими-то трудностями при работе с описанным слайдером – не стесняйтесь и пишите об этом в комментариях под данной статьей.

Файл
Размер
Ссылка
jssor-slider.zip
91,26 Kb
Скачать с сервера
Рекомендуем к просмотру
Циклический (бесконечный) последовательный вывод элементов массива на JavaScript
Статьи и советы
Получаем прямую ссылку на файл статьи (attachment) в DLE
Хаки
Как кроссбраузерно установить видеоролик в качестве фона на вашем сайте с помощью HTML5+CSS?
Статьи и советы
10
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    2
      •  Пользователь
    8 авг в 22:29

    Здравствуйте, а как можно отключить автоматическое перелистывание?

      • 1
      1066
        •  Команда Pandoge
      9 авг в 00:22

      Hunter, здравствуйте!

      Попробуйте здесь:

      $AutoPlay: true,

      true заменить на false

      • 3
      2
        •  Пользователь
      11 авг в 17:21

      Артём Мáлков, Если в html коде поменять на flase то слайдер вообще исчезает. Просто белый лист

      • 1
      1066
        •  Команда Pandoge
      12 авг в 09:25

      Hunter, не

      flase
      а

      false
    • 2
    2
      •  Пользователь
    13 апр в 15:44

    Здравствуйте, пытаюсь установить как вы писали. Выдает белый экран и больше ничего, хотя все подключено и все отображается

      • 1
      1066
        •  Команда Pandoge
      13 апр в 16:05

      dmitri, здравствуйте!

      Где можно посмотреть на то, что Вы сделали?

      • 1
      1
        •  Пользователь
      15 апр в 00:32

      Артём Мáлков, вот прошу, там все как у вас https://github.com/sonder2/slider

      • 1
      1066
        •  Команда Pandoge
      15 апр в 09:56

      dmitri, большое спасибо за замечание!

      Поправил немного JS в статье.

      • 2
      2
        •  Пользователь
      18 апр в 06:19

      Артём Мáлков, Хмм после замены у меня теперь выходят ошибки. https://prnt.sc/s1l3kf

      • 1
      1066
        •  Команда Pandoge
      21 апр в 11:48

      dmitri, у меня не повторилось.

Подняться наверх
«Pandoge» - помощник вебмастера