ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Автоматический и ручной слайдер HTML + CSS

Автоматический и ручной слайдер HTML + CSS

Автоматический и ручной слайдер HTML + CSS
Это простой по конструкции, как автоматический, так и ручной слайдер для изображений, что выполнен с применением HTML, CSS и JS, но без библиотек. При открытии сайта или страницы, слайдер автоматически начинает присвистывать снимки, что все редактируется в прилагаемом JS скрипте. Вы самостоятельно ставите те данные, которые вам нужны, как по ширине, так и по длине. Вся настройка проходит в закрепленных стилях CSS, где также меняется вся основная стилистика.

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

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

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

Установка:

HTML

Код
<div class="karusel_snimka">
  <div class="karusel_shoumev">
  <input type="radio" name="radio-btn" id="radio1">
  <input type="radio" name="radio-btn" id="radio2">
  <input type="radio" name="radio-btn" id="radio3">
  <input type="radio" name="radio-btn" id="radio4">
  <div class="sekus first">
  <img src="Ссылка на изображение-1.jpg" alt="Скрипты">
  </div>
  <div class="sekus">
  <img src="Ссылка на изображение-2.jpg" alt="Шаблоны">
  </div>
  <div class="sekus">
  <img src="Ссылка на изображение-3.jpg" alt="Дизайн">
  </div>
  <div class="sekus">
  <img src="Ссылка на изображение-4.jpg" alt="Услуги">
  </div>
  </div>

  <div class="rukovodstvo_navigats">
  <label for="radio1" class="manual-btn"></label>
  <label for="radio2" class="manual-btn"></label>
  <label for="radio3" class="manual-btn"></label>
  <label for="radio4" class="manual-btn"></label>
  </div>
</div>

CSS

Код
body{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #e3f9f6;
}

.karusel_snimka{
  border-radius: 5px;
  overflow: hidden;
  width: 712px;
  height: 364px;
  border: 7px solid white;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
}

.karusel_shoumev{
  width: 500%;
  height: 364px;
  display: flex;
}

.karusel_shoumev input{
  display: none;
}

.sekus{
  width: 20%;
  transition: 2s;
}

.sekus img{
  width: 712px;
  height: 364px;
}

.rukovodstvo_navigats{
  position: absolute;
  display: flex;
  justify-content: center;
  width: 712px;
  margin-top: -40px;
}

.manual-btn {
  border-radius: 8px;
  cursor: pointer;
  transition: 1s;
  border: 2px solid #459ac1;
  padding: 5px;
  width: 42px;
  box-shadow: 1px 1px 5px 0px rgb(70 67 67 / 63%), 0px 0px 3px 0px rgb(40 37 37 / 60%);
}

.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background: #dd7a15;
}

#radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
}

#radio4:checked ~ .first{
  margin-left: -60%;
}

/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  justify-content: center;
  margin-top: 460px;
  display: flex;
  width: 800px;
}

.automobile-sliv div{
  border-radius: 8px;
  transition: 1s;
  border: 2px solid #f3b03a;
  padding: 5px;
  width: 30px;
}

.automobile-sliv div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked ~ .automobile-sliv .auto-btn1{
  background: #d8f33a;
}

#radio2:checked ~ .automobile-sliv .auto-btn2{
   
  background: #d8f33a;
}

#radio3:checked ~ .automobile-sliv .auto-btn3{
  background: #d8f33a;
}

#radio4:checked ~ .automobile-sliv .auto-btn4{
  background: #d8f33a;
}

JS

Код
var counter = 1;
  setInterval(function(){
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if(counter > 4){
  counter = 1;
  }
  }, 5000);

На этом установка завершена!

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

Демонстрация
07 Января 2022 Загрузок: 3 Просмотров: 2336 Комментариев: (4)
Поделиться в социальных сетях

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

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

Комментарии: 4
FeStemBer
FeStemBer 07 Января 2022 21:021
0
Минус в этом слайдеры, что он не отзывчивый к мобильным аппаратам.
-SAM-
-SAM- 07 Января 2022 23:572
0
Там не сложной адаптивность должна быть, как понял. Стили на замену:
.karusel_snimka{width: 712px;} --> .karusel_snimka{max-width: 712px;width:100%;}
.sekus img{width: 712px;} --> .sekus img{max-width: 712px;width:100%;object-fit:cover;/*object-position:0 0;*/}
.rukovodstvo_navigats{width: 712px;} --> .rukovodstvo_navigats{max-width: 712px;width:100%;overflow-x:hidden!important;}
.rukovodstvo_navigats{margin-top: -40px;} --> .rukovodstvo_navigats{margin: -40px -7px 0;}
.manual-btn{width: 42px;} --> .manual-btn{max-width: 42px;min-width:10px;width:calc(100% - 7px);}
UPD.: этого вполне достаточно, Kosten. А так, то берутся материалы с сайтов, что старые (видимо, на момент их публикации тогда еще вопрос адаптивности не стоял).
Kosten
Kosten 08 Января 2022 12:173
0
-SAM-, приветствую, если будет возможность, то сделайте полную адаптивность, в материале укажем. Просто заметил, что на англоязычных сайтах сильно не замарачиваються на адаптивность, или как переводчик переводит, отзывчивый. Там и уже материалы за этот год, мало адаптивного найти.

В большинстве зависит от веб мастера.
noavatar
Qwazor 08 Января 2022 12:584
0
Да адаптивности бы, так если даже сузить экран кнопки вылазят за пределы даже картинки и картинка тоже не адаптивная
Войдите:
avatar