ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Отзывчивый слайдер карусель на CSS+JS

Отзывчивый слайдер карусель на CSS+JS

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

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

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

Все рассматривалось на тестовой площадке, где при открытие страницы идет такой вид.

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

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

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

Это мобильный телефон, что не чего не изменилось, но разве размер сильно уменьшился.

Мобильный слайдер для сайта на CSS

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

Для начало подключаем шрифтовые кнопки, которые постановлены по сторонам.

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">

HTML

Код
<div class="assectetu-adipigucin">
  <div class="gadipiquis-quamgucin kigadvasemung">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #1</h1>
  <p>Здесь идет описание к изображению №1</p>
  </div>
  </div>
  <div class="gadipiquis-quamgucin">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #2</h1>
  <p>Здесь идет описание к изображению №2</p>
  </div>
  </div>
  <div class="gadipiquis-quamgucin">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #3</h1>
  <p>Здесь идет описание к изображению №3</p>
  </div>
  </div>
  <div class="gadipiquis-quamgucin">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #4</h1>
  <p>Здесь идет описание к изображению №4</p>
  </div>
  </div>
  <div class="gadipiquis-quamgucin">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #5</h1>
  <p>Здесь идет описание к изображению №5</p>
  </div>
  </div>
  <div class="gadipiquis-quamgucin">
  <div class="adipiperiam-pariatusicing">
  <h1>ZorNet.Ru для вебмастера #6</h1>
  <p>Здесь идет описание к изображению №6</p>
  </div>
  </div>
</div>
<div class="gasopedu-ngxabaicing">
  <button id="prev"><i class="fas fa-arrow-left"></i></button>
  <button id="next"><i class="fas fa-arrow-right"></i></button>
</div>

CSS

Код
.assectetu-adipigucin{
position:relative;
overflow:hidden;
height:100vh;
width:100vw;
}

.gadipiquis-quamgucin{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity 0.4s ease-in-out;
}

.gadipiquis-quamgucin.kigadvasemung{
opacity:1;
}

.gadipiquis-quamgucin .adipiperiam-pariatusicing{
position:absolute;
bottom:70px;
left:-600px;
opacity:0;
width:600px;
background:rgba(255,255,255,0.8);
color:#333;
padding:35px;
}

.gadipiquis-quamgucin .adipiperiam-pariatusicing h1{
margin-bottom:10px;
}

.gadipiquis-quamgucin.kigadvasemung .adipiperiam-pariatusicing{
opacity:1;
transform:translateX(600px);
transition:all 0.7s ease-in-out 0.3s;
}

.gasopedu-ngxabaicing button#next{
position:absolute;
top:50%;
right:15px;
}

.gasopedu-ngxabaicing button#prev{
position:absolute;
top:50%;
left:15px;
}

.gasopedu-ngxabaicing button{
border:2px solid #fff;
background:transparent;
color:#fff;
cursor:pointer;
padding:13px 15px;
border-radius:50%;
outline:none;
}

.gasopedu-ngxabaicing button:hover{
background:#fff;
color:#333;
}

.gadipiquis-quamgucin:first-child{
background:url(Ссылка на изображение #1) no-repeat center center/cover;
}

.gadipiquis-quamgucin:nth-child(2){
background:url(Ссылка на изображение #2) no-repeat center center/cover;
}

.gadipiquis-quamgucin:nth-child(3){
background:url(Ссылка на изображение #3) no-repeat center center/cover;
}

.gadipiquis-quamgucin:nth-child(4){
background:url(Ссылка на изображение #4) no-repeat center center/cover;
}

.gadipiquis-quamgucin:nth-child(5){
background:url(Ссылка на изображение #5) no-repeat center center/cover;
}

.gadipiquis-quamgucin:nth-child(6){
background:url(Ссылка на изображение #6) no-repeat center center/cover;
}

@media (max-width:500px){
.gadipiquis-quamgucin .adipiperiam-pariatusicing{
bottom:-300px;
left:0;
width:100%;
}

.gadipiquis-quamgucin.kigadvasemung .adipiperiam-pariatusicing{
transform:translateY(-300px);
}

}

JS

Код
const slides = document.querySelectorAll('.gadipiquis-quamgucin');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = true;
const intervalTime = 5000;
let slideInterval;
const nextSlide = () => {
  const kigadvasemung = document.querySelector('.kigadvasemung');
  kigadvasemung.classList.remove('kigadvasemung'); //remove kigadvasemung class
  if(kigadvasemung.nextElementSibling) {
  kigadvasemung.nextElementSibling.classList.add('kigadvasemung');
  } else {
  slides[0].classList.add('kigadvasemung');
  }
  setTimeout(() => kigadvasemung.classList.remove('kigadvasemung'));
};
const prevSlide = () => {
  const kigadvasemung = document.querySelector('.kigadvasemung');
  kigadvasemung.classList.remove('kigadvasemung'); //remove kigadvasemung class
  if(kigadvasemung.previousElementSibling) {
  kigadvasemung.previousElementSibling.classList.add('kigadvasemung');
  } else {
  slides[slides.length - 1].classList.add('kigadvasemung');
  }
  setTimeout(() => kigadvasemung.classList.remove('kigadvasemung'));
};
next.addEventListener('click', e => {  
  nextSlide();
  if(auto) {
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, intervalTime);
  }
});
prev.addEventListener('click', e => {  
  prevSlide();
  if(auto) {
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, intervalTime);
  }
});
if(auto) {
  slideInterval = setInterval(nextSlide, intervalTime);
}

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

Использующий слайдер, который работает при помощи CSS3, также поддерживает новые функции для мобильных устройств, где самостоятельно можете найти какой-нибудь слайдер или слайд-шоу изображений, где выставляете картинки или фоновые изображение с HTML-кодом для веб-сайта.

Демонстрация
16 Апреля 2019 Загрузок: 3 Просмотров: 1507 Комментариев: (0)
Поделиться в социальных сетях

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

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

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