ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивное слайд-шоу при помощи CSS3 и JS

Адаптивное слайд-шоу при помощи CSS3 и JS

Адаптивное слайд-шоу при помощи CSS3 и JS
Есть тематические сайты, где без слайдера они считаются не полные по информации, где вниманию адаптивный слайд, что создан на CSS и JavaScript. Здесь не нужны дополнения, виде библиотеке, со всей функциональностью отлично справляется скрипт. Где он представлен в 2 варианта, это кому нужно, чтоб была карусель, что сами задаете интервал показа. Но и также стандартное решение, что самостоятельно переключаем по кнопкам по сторонам, и которые располагаются ниже.

Вот стандартный и в чем-то универсальный инструмент, который отлично подойдет для запуска всевозможных онлайн-проектов в короткие сроки. Чтобы быть более точным, это слайдер, что подойдет на очень многие тематические веб-ресурсы, как для я предприятий или для свободного общение, это проект в виде блога или портфолио. А с добавлением адаптивного слайдера в веб-дизайн вы можете создать сильное первое впечатление для гостей и пользователей, что сразу могут обнаружить нужную тему.

Рассмотрим как все выгладит, где все проверенно на работоспособность:

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

Слайдер адаптивный на CSS для сайта

Здесь вероятнее вид с планшета, так как по элементам не будет меняться.

Слайдер для сайта в адаптивном стиле CSS

Это уже мобильные гаджет, где также наблюдаем все аналогичные функции, как на широком мониторе.

Мобильный слайдер для сайта с помощью CSS3

Установка:

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

HTML

Код
<div class="adaptivnaya_slayder">
<div class="kavenudsa animatsiya">
  <div class="dsamesug">1 / 3</div>
  <img src="http://zornet.ru/ABVUN/Aba/detunis/pervy-snimok.jpg" style="width:100%">
  <div class="tekstura">Первый слайд</div>
</div>

<div class="kavenudsa animatsiya">
  <div class="dsamesug">2 / 3</div>
  <img src="http://zornet.ru/ABVUN/Aba/detunis/vtoroy-kadr.jpg" style="width:100%">
  <div class="tekstura">Вторая картинка</div>
</div>

<div class="kavenudsa animatsiya">
  <div class="dsamesug">3 / 3</div>
  <img src="http://zornet.ru/ABVUN/Aba/detunis/tretya-kartinka.jpg" style="width:100%">
  <div class="tekstura">Третье изображение</div>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
  <span class="avomacen" onclick="currentSlide(1)"></span>  
  <span class="avomacen" onclick="currentSlide(2)"></span>  
  <span class="avomacen" onclick="currentSlide(3)"></span>  
</div>

CSS

Код
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.kavenudsa {display: none}
img {vertical-align: middle;}

/* Контейнер для слайдшоу */
.adaptivnaya_slayder {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Следующая и предыдущая кнопки */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #fdfdfd;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Расположите «следующую кнопку» вправо */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* При наведении курсора добавьте черный фон с немного прозрачным */
.prev:hover, .next:hover {
  background-color: rgba(53, 53, 53, 0.56);
}

/* Текст подписи */
.tekstura {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  text-shadow: 0 1px 0 #151515;
}

/* Числовой текст (1/3) */
.dsamesug {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Избежание / Пули / Индикаторы */
.avomacen {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bfb5b5;
  border-radius: 100%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.deysevuscu, .avomacen:hover {
  background-color: #353434;
}

/* Затухающая анимация */
.animatsiya {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes animatsiya {
  from {opacity: .4}  
  to {opacity: 1}
}

@keyframes animatsiya {
  from {opacity: .4}  
  to {opacity: 1}
}

/* На меньших экранах уменьшите размер текста */
@media only screen and (max-width: 300px) {
  .prev, .next,.tekstura {font-size: 11px}
}

JS

Код
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("kavenudsa");
  var avomacens = document.getElementsByClassName("avomacen");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
  }
  for (i = 0; i < avomacens.length; i++) {
  avomacens[i].className = avomacens[i].className.replace(" deysevuscu", "");
  }
  slides[slideIndex-1].style.display = "block";  
  avomacens[slideIndex-1].className += " deysevuscu";
}

Если вам нужна карусель, чтоб при открытие страницы слайды автоматически обновлялись, то просто нужно заменить JS, на тот который ниже представлен.

JS-карусель

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

Код
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("kavenudsa");
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Меняйте изображение каждые 2 секунды
}

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

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

Демонстрация
Источник: html5css.ru
04 Марта 2020 Загрузок: 4 Просмотров: 1094 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar