» »

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

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

Красиво сознанный адаптивный слайдер для изображений, который имеет функцию карусели, что автоматически проматывает слайды с помощью CSS и jQuery. Внешний вид у него не плоский, что идет в оригинальном виде, где при любом фоне можно заметить, что нижнее углы сделаны немного по другому, если сравнивать с верхними углами. Сейчас слайдеры стали очень популярны на актуальных темах, это могут разные, но нельзя представить интернет магазин, который не содержат слайд шоу на своем ресурсе.

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

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

Рассмотрим каркас в слайдера в работе на разном разрешение:

1. При открытие сайта или страницы, где находится слайд.

Адаптивный веб-дизайн слайдера

2. Здесь вид с планшета, где не видим не каких изменений.

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

3. Еще меньше делаем ширину и приближаем к смартфону.

Слайдер в красивом веб-дизайне

4. Это уже на самом небольшом экране, что можно представить.

Слайд-шоу для вашего сайта

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

HTML

Код
<section id="kenonsunsica" class="cameconselub">
  <ul class="konsecgetum-qadipisicing">
  <li class="placsaveag-saquidempod">
  <img src="Ссылка для картинки под номером №1" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Скрипты</h2>
  <p>Первое описание под изображение</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №2" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Название</h2>
  <p>Второе описание под картинку</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №3" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Ключевая фраза</h2>
  <p>третье описание на снимок</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №4" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Интернет ресурс</h2>
  <p>Описание на темно прозрачной форме</p>
  </div>
  </li>
  </ul>
  <div class="paesusadas-endemosag"></div>
  <ul id="gesanilpa-dunedazam" class="gesanilpa-dunedazam"></ul>
  </section>

CSS

Код
.cameconselub {
  width: 798px;
  margin: 39px auto 0;
}

.konsecgetum-qadipisicing {
  z-index: 500;
  position: relative;
  width: 100%;
  height: 358px;
  background: #FFF;
  border: 5px solid #4b5973;
  overflow: hidden;
}

.konsecgetum-qadipisicing li {
  display: none;
}

.konsecgetum-qadipisicing .placsaveag-saquidempod {
  display: block;
}

.paesusadas-endemosag {
  width: 100%;
  height: 15px;
  position: relative;
}

.paesusadas-endemosag:after, .paesusadas-endemosag:before {
  content: '';
  position: absolute;
  background: #171c24;
  height: 100%;
  width: 50%;
  left: 10px;
  top: -20px;
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  -webkit-box-shadow: 0 0 15px 8px #171c24;
  box-shadow: 0 0 15px 8px #171c24;
}

.paesusadas-endemosag:before {
  right: 10px;
  left: auto;
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

.konsecgetum-qadipisicing img {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.konsecgetum-qadipisicing .belaudansum {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.65);
  width: 100%;
  padding: 10px;
  color: #FFF;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.konsecgetum-qadipisicing li:hover .belaudansum {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.konsecgetum-qadipisicing h2 {
  color: #00c5b9;
  font-size: 2em;
  font-weight: 400;
  margin-bottom: 6px;
}

.konsecgetum-qadipisicing p {
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4em;
}

.gesanilpa-dunedazam {
  margin-top: 15px;
  text-align: center;
}

.gesanilpa-dunedazam li {
  cursor: pointer;
  display: inline-block;
  background: #424f66;
  text-indent: -99999px;
  height: 12px;
  width: 12px;
  margin: 0 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.gesanilpa-dunedazam li.kegasenes {
  background: #00c5b9;
}

  @media only screen and (max-width: 825px) {
  .cameconselub {
  width: 500px;
  }

  .konsecgetum-qadipisicing {
  height: 260px;
  }
  }

  @media only screen and (max-width: 535px) {
  .cameconselub {
  padding: 5px;
  width: 100%;
  margin: 40px 0 0 0;
  }

  .konsecgetum-qadipisicing {
  height: 200px;
  }
   
  .konsecgetum-qadipisicing .belaudansum {
  display: none;
  }

  }

  @media only screen and (max-width: 410px) {
  .konsecgetum-qadipisicing {
  height: 160px;
  }
  }

JS

Код
$(function() {

  var kenonsunsicaModule = (function() {
  var pb = {};
  pb.el = $('#kenonsunsica');
  pb.items = {
  panels: pb.el.find('.konsecgetum-qadipisicing > li'),
  }

  var kenonsunsicaInterval,
  currentkenonsunsica = 0,
  nextkenonsunsica = 1,
  lengthkenonsunsica = pb.items.panels.length;

  pb.init = function(settings) {
  this.settings = settings || {duration: 8000};
  var items = this.items,
  lengthPanels = items.panels.length,
  output = '';

  for(var i = 0; i < lengthPanels; i++) {
  if(i == 0) {
  output += '<li class="kegasenes"></li>';
  } else {
  output += '<li></li>';
  }
  }

  $('#gesanilpa-dunedazam').html(output);

  activatekenonsunsica();

  $('#gesanilpa-dunedazam').on('click', 'li', function(e) {
  var $this = $(this);
  if(!(currentkenonsunsica === $this.index())) {
  changePanel($this.index());
  }
  });

  }

  var activatekenonsunsica = function() {
  kenonsunsicaInterval = setInterval(pb.startkenonsunsica, pb.settings.duration);
  }

  pb.startkenonsunsica = function() {
  var items = pb.items,
  controls = $('#gesanilpa-dunedazam li');

  if(nextkenonsunsica >= lengthkenonsunsica) {
  nextkenonsunsica = 0;
  currentkenonsunsica = lengthkenonsunsica-1;
  }

  controls.removeClass('kegasenes').eq(nextkenonsunsica).addClass('kegasenes');
  items.panels.eq(currentkenonsunsica).fadeOut('slow');
  items.panels.eq(nextkenonsunsica).fadeIn('slow');

  currentkenonsunsica = nextkenonsunsica;
  nextkenonsunsica += 1;
  }

  var changePanel = function(id) {
  clearInterval(kenonsunsicaInterval);
  var items = pb.items,
  controls = $('#gesanilpa-dunedazam li');

  if(id >= lengthkenonsunsica) {
  id = 0;
  } else if(id < 0) {
  id = lengthkenonsunsica-1;
  }

  controls.removeClass('kegasenes').eq(id).addClass('kegasenes');
  items.panels.eq(currentkenonsunsica).fadeOut('slow');
  items.panels.eq(id).fadeIn('slow');

  currentkenonsunsica = id;
  nextkenonsunsica = id+1;
  activatekenonsunsica();
  }

  return pb;
  }());

  kenonsunsicaModule.init({duration: 4000});

});

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

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

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

Демонстрация
2019-01-19 Загрузок: 1 Просмотров: 386 Комментарий: (2)

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

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

Комментарий: 2
iHarD
iHarD 2019-01-20 19:301
0
Сейчас почти все сайты юзает чисто HTML + CSS, без JS для таких по крайне мере случаев, есть ли смысл ставить такое решение?
Kosten
Kosten 2019-01-20 23:112
+1
iHarD, в том то и дело, что материал не под юкоз выставлен, если по конструктору, то это в скрипты для юкоз есть категория.
avatar