» »

Широкий адаптивный слайдер изображений

Широкий адаптивный слайдер изображений

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

Если вы будете смотреть с мобильного аппарата, то он все корректно покажет, так как отлично адаптирован под них. На нем можно как рекламировать товары или делать красивые презентаций, что всех удивят и каждый может листать его, кнопки расположены прямо в нем, что отлично структурированные по своей стилистике. Если ваш сайт на тематику туризм, то здесь значительно будет улучшена визуализация и что главное по установке он не сложен и каждый может его поставить на свою площадку, и тем порадовать ваших гостей или пользователей сайта.

Приступаем к установке:

1. Вам нужно скачать архив и все что в нем находится поместить в одну папку parallax-drag которую изначально нужно создать.
2. После создаем страницу, да именно ее, так как она будет под ссылкой, это можно сделать через "через редактор страниц" или вывести на html и там уже прописать скрипт.

Код
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Отзывчивый Parallax Drag-слайдер</title>  
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>  
<link href='/parallax-drag/style.css' rel='stylesheet' type='text/css'>  
</head>  
<body translate="no" >  
<div class="cont">  
<div class="slider"></div>  
<ul class="nav"></div>  
<div data-target='right' class="side-nav side-nav--right"></div>  
<div data-target='left' class="side-nav side-nav--left"></div>  
</div>  
<script src="/parallax-drag/script.js"></script>  
<script src='/parallax-drag/jquery.min.js'></script>  
<script src='/parallax-drag/main.js'></script>  
</body>  
</html>


PS - если вы делаете на сайте системы uCoz и у вас не куплена корзина, это убрать рекламу, то вы не забывайте установить оператор $POWERED_BY$, то получиться так, что вы просто не сохраните страницу и она не будет создана.

Источник и сразу демонстрация материала.
28.02.2017 Загрузок: 7 Просмотров: 732 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
FeStemBer
FeStemBer 28.02.2017 22:531
0
Крутой слайдер, просто его demo видел, и на весь экран это точно, что он адаптирован еще под мобильные аппараты, это поднимает его рейтинг.
Kosten
Kosten 28.02.2017 23:012
0
Поставил демонстрацию, что можно посмотреть, но как понимаю не на весь экран, так как все коды там прописаны, но понять можно его работу.
Kosten
Kosten 28.02.2017 23:073
0
И на счет адаптивности под мобильные, то вот браузером сделал и все корректно как видим.

avatar