Слайдер, карусель на Java Script для сайта

Содержание

4.7 (94.67%) 15 vote[s]

Слайдер или карусель — почти обязательный элемент сайта. Есть масса вариантов их реализации, начиная от плагинов и виджетов, и заканчивая самодельными блоками, реализованными на чистом CSS или JS. Преимущества последнего — карусель или слайдер не занимает много места, не замедляют загрузку сайта, не конфликтуют с CSS стилями темы (как, например, с кастомными слайдерами и каруселями, написанными на бутстрап и вставленными на сайт, использующим старую тему без использования бутстрап).

Cамый простой слайдер на Java Script

❮ ❯

Смотреть исходный код:

```
<html>
```
```
<head>
```
```
  <meta charset="utf-8">
```

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

```
 
```
```
  <style>
```
```
 
```
```
.slider{
```
```
    max-width: 80%;
```
```
    position: relative;
```
```
    margin: auto;
```
```
    height: auto;
```
```
    margin-bottom: 15px;
```
```
}
```

/* Картинка масштабируется по отношению к родительскому элементу */

```
.slider .item img {
```

   /* заполняем картинкой поле с сохранением пропорций */

```
    object-fit: cover;
```
```
    width: 100%;
```
```
    height: 100%;
```
```
    border: none !important;
```
```
    box-shadow: none !important;
```
```
}
```

/* Кнопки вперед и назад */

```
.slider .prev, .slider .next {
```
```
    cursor: pointer;
```
```
    position: absolute;
```
```
    top: 0;
```
```
    top: 50%;
```
```
    width: auto;
```
```
    margin-top: -22px;
```
```
    padding: 16px;
```
```
    color: white;
```
```
    font-weight: bold;
```
```
    font-size: 18px;
```
```
    transition: 0.6s ease;
```
```
    border-radius: 0 3px 3px 0;
```
```
}
```
```
.slider .next {
```
```
    right: 0;
```
```
    border-radius: 3px 0 0 3px;
```
```
}
```

/* Фон кнопок вперед и назад при наведении */

```
.slider .prev:hover,
```
```
.slider .next:hover {
```

    background-color: rgba(0, 0, 0, 0.8);

```
}
```
```
/* надпись */
```
```
.slideText {
```
```
    position: absolute;
```
```
    color: #fff;
```
```
    font-size: 35px;
```

    /* Выравнивание текста горизонтально и по вертикально*/

```
    left: 50%;
```
```
    top: 50%;
```
```
    transform: translate(-50%, -50%);
```
```
    /* Тень текста*/
```

    text-shadow: 1px 1px 1px #000, 0 0 1em #000;

```
}
```

/* Кружочки под слайдами */

```
.slider-dots {
```
```
    text-align: center;
```
```
}
```
```
.slider-dots_item{
```
```
    cursor: pointer;
```
```
    height: 12px;
```
```
    width: 12px;
```
```
    margin: 0 2px;
```
```
    background-color: #ddd;
```
```
    border-radius: 50%;
```
```
    display: inline-block;
```

    transition: background-color 0.6s ease;

```
}
```
```
.active,
```
```
.slider-dots_item:hover {
```
```
    background-color: #aaa;
```
```
}
```
```
/* Анимация слайдов */
```
```
.slider .item {
```
```
    -webkit-animation-name: fade;
```
```
    -webkit-animation-duration: 1.5s;
```
```
    animation-name: fade;
```
```
    animation-duration: 1.5s;
```
```
}
```
```
@-webkit-keyframes fade {
```
```
    from {
```
```
        opacity: .4
```
```
    }
```
```
    to {
```
```
        opacity: 1
```
```
    }
```
```
}
```
```
@keyframes fade {
```
```
    from {
```
```
        opacity: .4
```
```
    }
```
```
    to {
```
```
        opacity: 1
```
```
    }
```
```
}
```
```
 
```
```
a {
```
```
text-decoration: none;
```
```
color: white;
```
```
}
```
```
 
```
```
  </style>
```
```
<div class="slider">
```

    <div class="item" id="slide showing">

        <img src="https://img.jpg" alt="Первый слайд">

        <div class="slideText" ><a style="text-align:center;color:white;" href="">Дети</a></div>

```
    </div>
```
```
 
```
```
    <div class="item">
```

        <img src="https://img.jpg" alt="Второй слайд">

        <div class="slideText" href=""><a style="text-align:center;color:white;" href="">Дизайн интерьера</a></div>

```
    </div>
```
```
 
```
```
    <div class="item">
```

        <img src="https://img.jpg" alt="Третий слайд">

        <div class="slideText" href=""><a style="text-align:center;color:white;" href="">КиберБабуля</a></div>

```
    </div>
```
```
 
```
```
	<div class="item">
```

        <img src="https://img.jpg" alt="Четвертый слайд">

        <div class="slideText" href=""><a style="text-align:center;color:white;" href="">МедБабуля</a></div>

```
    </div>
```
```
 
```
```
	<div class="item">
```

        <img src="https://img.jpg" alt="Пятый слайд">

        <div class="slideText" href=""><a style="text-align:center;color:white;" href="">Рецепты</a></div>

```
    </div>
```
```
 
```

    <a class="prev" onclick="minusSlide()">&#10094;</a>

    <a class="next" onclick="plusSlide()">&#10095;</a>

```
</div>
```
```
 
```
```
<div class="slider-dots">
```

    <span class="slider-dots_item"  onclick="currentxSlide(1)"></span>

    <span class="slider-dots_item" onclick="currentxSlide(2)"></span>

    <span class="slider-dots_item" onclick="currentxSlide(3)"></span>

	<span class="slider-dots_item" onclick="currentxSlide(4)"></span>

    <span class="slider-dots_item" onclick="currentxSlide(5)"></span>

```
</div>
```
```
 
```
```
  <script>
```
```
   var slideIndex = 1;
```
```
showSlides(slideIndex);
```
```
 
```
```
 
```

/* Функция увеличивает индекс на 1, показывает следующй слайд*/

```
function plusSlide() {
```
```
    showSlides(slideIndex += 1);
```
```
}
```
```
 
```

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/

```
function minusSlide() {
```
```
    showSlides(slideIndex -= 1);  
```
```
}
```
```
 
```

/* Устанавливает текущий слайд */

```
function currentxSlide(n) {
```
```
    showSlides(slideIndex = n);
```
```
}
```
```
 
```

/* Основная функция слайдера */

```
function showSlides(n) {
```
```
    var i;
```

    var slides = document.getElementsByClassName("item");

    var dots = document.getElementsByClassName("slider-dots_item");

```
    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 < dots.length; i++) {
```

        dots[i].className = dots[i].className.replace(" active", "");

```
    }
```

    slides[slideIndex - 1].style.display = "block";

    dots[slideIndex - 1].className += " active";

```
}
```
```
 
```
```
  </script>
```
```
</body>
```
```
</html>
```

Вот вариант, такой же слайдер, но с нижней полосой прокрутки:

❮ ❯

Смотреть исходный код:

```
<!DOCTYPE html>
```
```
<html>
```

<meta name="viewport" content="width=device-width, initial-scale=1">

```
<style>
```
```
 
```
```
* {
```
```
  box-sizing: border-box;
```
```
}
```
```
 
```
```
img {
```
```
  vertical-align: middle;
```
```
}
```
```
 
```
```
.container {
```
```
  position: relative;
```
```
  border-radius:8px;
```
```
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
```
```
}
```
```
 
```
```
.mySlides {
```
```
  display: none;
```
```
}
```
```
 
```
```
.cursor {
```
```
  cursor: pointer;
```
```
}
```
```
 
```
```
.prev,
```
```
.next {
```
```
  cursor: pointer;
```
```
  position: absolute;
```
```
  top: 40%;
```
```
  width: auto;
```
```
  padding: 16px;
```
```
  margin-top: -50px;
```
```
  color: white;
```
```
  font-weight: bold;
```
```
  font-size: 20px;
```
```
  border-radius: 0 3px 3px 0;
```
```
  user-select: none;
```
```
  -webkit-user-select: none;
```
```
}
```
```
 
```
```
.next {
```
```
  right: 0;
```
```
  border-radius: 3px 0 0 3px;
```
```
}
```
```
 
```
```
.prev:hover,
```
```
.next:hover {
```
```
  background-color: rgba(0, 0, 0, 0.8);
```
```
}
```
```
 
```
```
.numbertext, .numbertext a {
```
```
  vertical-align:middle;
```
```
  font-family:Open Sans;
```
```
  font-size:30px !important;
```
```
  color:#b6ffa3;
```

  text-shadow: 1px 1px 2px black, 0 0 1em #ffffff;

```
  position: absolute;
```
```
  top: 20px;
```
```
  left: 10%;
```
```
  text-decoration:none;
```
```
}
```
```
.numbertext a:hover {
```
```
color:#008216;
```
```
}
```
```
 
```
```
.caption-container {
```
```
  text-align: center;
```

  background:linear-gradient(45deg, #EECFBA, #C5DDE8);

```
  padding: 2px 10px;
```
```
  font-family:Open Sans;
```
```
  font-size:24px !important;
```
```
  color:#fff;
```

  text-shadow: 1px 1px 2px black, 0 0 1em #ffffff;

```
}
```
```
 
```
```
.row:after {
```
```
  content: "";
```
```
  display: table;
```
```
  clear: both;
```
```
}
```
```
 
```
```
.column {
```
```
  float: left;
```
```
  width: 16.66%;
```
```
}
```
```
.demo {
```
```
 opacity: 0.6;
```
```
}
```
```
.demo.cursor.lazyloaded  {
```
```
  opacity: 0.6;
```
```
}
```
```
.demo.cursor.lazyloaded.active  {
```
```
  opacity: 1;
```
```
}
```
```
.active,
```
```
.demo:hover {
```
```
  opacity: 1;
```
```
}
```
```
</style>
```
```
<body>
```
```
 
```
```
<div class="container">
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d1%80%d0%b5%d0%bb%d0%b0%d0%ba%d1%81%d0%b1%d0%b0%d0%b1%d1%83%d0%bb%d1%8f/">РелаксБабуля</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/09/Релакс22.jpg" style="width:100%">

```
  </div>
```
```
 
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/">Рецепты</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/рецепты.jpg" style="width:100%" alt="Babulya">

```
  </div>
```
```
 
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d0%bc%d0%b5%d0%b4%d0%b1%d0%b0%d0%b1%d1%83%d0%bb%d1%8f/">МедБабуля</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/медицина.jpg" style="width:100%" alt="Babulya">

```
  </div>
```
```
 
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d0%ba%d0%b8%d0%b1%d0%b5%d1%80%d0%b1%d0%b0%d0%b1%d1%83%d0%bb%d1%8f/">КиберБабуля</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/кибер.jpg" style="width:100%" alt="Babulya">

```
  </div>
```
```
 
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d1%8c%d0%b5%d1%80%d0%b0/">ПрорабБабуля</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дизайн.jpg" style="width:100%" alt="Babulya">

```
  </div>
```
```
 
```
```
  <div class="mySlides">
```

    <div class="numbertext"><a href="https://www.babulya.com.ua/category/%d0%b4%d0%b5%d1%82%d0%b8/">Дети</a></div>

    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дети.jpg" style="width:100%">

```
  </div>
```
```
 
```

  <a class="prev" onclick="plusSlides(-1)">❮</a>

  <a class="next" onclick="plusSlides(1)">❯</a>

```
 
```
```
  <div class="caption-container">
```
```
    <p id="caption"></p>
```
```
  </div>
```
```
 
```
```
  <div class="row">
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/09/Релакс22.jpg" style="width:100%" onclick="currentSlide(1)" alt="Oтдых, Хобби">

```
    </div>
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/07/рецепты.jpg" style="width:100%" onclick="currentSlide(2)" alt="Домашняя кухня">

```
    </div>
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/07/медицина.jpg" style="width:100%" onclick="currentSlide(3)" alt="Болезни, рецепты">

```
    </div>
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/07/кибер.jpg" style="width:100%" onclick="currentSlide(4)" alt="Осваиваем мир IT">

```
    </div>
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дизайн.jpg" style="width:100%" onclick="currentSlide(5)" alt="Дизайн со вкусом">

```
    </div>    
```
```
    <div class="column">
```

      <img class="demo cursor" src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дети.jpg" style="width:100%" onclick="currentSlide(6)" alt="Общение и воспитание">

```
    </div>
```
```
  </div>
```
```
</div>
```
```
 
```
```
<script>
```
```
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("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  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 < dots.length; i++) {
```

      dots[i].className = dots[i].className.replace(" active", "");

```
  }
```

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

```
 
```
```
 
```
```
}
```
```
 
```
```
 
```
```
</script>
```
```
 
```
```
</body>
```
```
</html>
```

Карусель на Java Script

Простенькая карусель, которая реализована путём изменения прозрачности картинок.

Задаем первый слайд, устанавливаем ему класс slide showing и прозрачность 1 (непрозрачный). Все остальные — задаем другой класс slide, устанавливаем opacity: 0;

В функции задаем интервал (2000), получаем доступ к атрибутам тега slides .slide и меняем класс на slide showing, и картинка становится видимой. z-index: 2; перекрывает первый слайд, у которого z-index устанавливаем 1. Чтобы картинки класса .slide накладывались одна на другую, задаем им position: absolute;

Смотреть исходный код:

```
<!DOCTYPE html><html>
```
```
<head>
```
```
<meta charset="UTF-8" />
```
```
 
```
```
<style>
```
```
 
```
```
#slides{
```
```
	position: relative;
```
```
	padding: 0px;
```
```
	margin: 0px;
```
```
	list-style-type: none;
```
```
}
```
```
 
```
```
.slide{
```
```
	position: absolute;
```
```
	left: 0px;
```
```
	top: 0px;
```
```
	width: 100%;
```
```
	height: 100%;
```
```
	opacity: 0;
```
```
	z-index: 1;
```
```
 
```
```
	-webkit-transition: opacity 1s;
```
```
	-moz-transition: opacity 1s;
```
```
	-o-transition: opacity 1s;
```
```
	transition: opacity 1s;
```
```
}
```
```
 
```
```
.showing{
```
```
	opacity: 1;
```
```
	z-index: 2;
```
```
}
```
```
 
```
```
img {
```
```
width:100%;
```
```
height:auto;
```
```
}
```
```
 
```
```
</style>
```
```
 </head>
```
```
 <body>
```
```
 
```
```
  <ul id="slides">
```

	<li class="slide showing"><img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/кибер.jpg" alt=""></li>

	<li class="slide"><img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дети.jpg" alt="" ></li>

	<li class="slide"><img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/дизайн.jpg" alt="" ></li>

	<li class="slide"><img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/медицина.jpg" alt="" ></li>

	<li class="slide"><img src="https://www.babulya.com.ua/wp-content/uploads/2019/07/рецепты.jpg" alt="" ></li>

```
</ul>
```
```
  <script>
```

  var slides = document.querySelectorAll('#slides .slide');

```
var currentSlide = 0;
```

var slideInterval = setInterval(nextSlide,2000);

```
 
```
```
function nextSlide(){
```

	slides[currentSlide].className = 'slide';

	currentSlide = (currentSlide+1)%slides.length;

	slides[currentSlide].className = 'slide showing';

```
}
```
```
  </script>
```
```
 </body>
```
```
</html>
```