слайдер на чистом js. Плавное переключение картинок

Question

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

JS:

var image = ['картинка1', 'картинка2', 'картинка3'];
var num = 0;
function next(){
    var slider = document.getElementById('slider');
    num++;
    if(num >= image.length){
        num = 0;
    }
    slider.src=image[num];
}
function prev(){
    var slider = document.getElementById('slider');
    num--;
    if(num < 0){
        num= image.length-1;
    }
    slider.src=image[num];
}

CSS:

.button{
  min-width: 320px;
  min-height: 240px;
  width: 40vw;
  display: flex;
  justify-content: space-between; 
}
.section{
  min-width: 320px;
  min-height: 240px;
  position: relative;
  width: 40vw;
  height: 26.6vw;
  margin: 0 auto;
  overflow: hidden;
}
.button_p{
transition: 0.6s ease;
margin-top: -100%;
float: left;
width: 10%;
height: 1000px;
}
.button_n{
transition: 0.6s ease;
margin-top: -100%;
float: right;
width: 10%;
height: 1000px;
}
.imges{
  min-width: 320px;
  min-height: 240px;
  width: 40vw;
  height: 26.6vw;
}

.button_p:hover{background:rgba(0,0,0,0.6);}
.button_n:hover{background:rgba(0,0,0,0.6);}

Answer 1

Никакой transition не поможет, если сразу переключать src картинки (оно принимает только одно значение, нет промежуточных состояний для анимации).

Можно вставить все картинки в виде <img> в общий контейнер, позиционировать absolute, чтобы накладывались друг на друга и анимировать их opacity.

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

let data = [
  "https://gyazo.com/f2483ea0884e464410faa0c84a552727.png",
  "https://gyazo.com/a5e892094cc05497b148e9e8c6b4763b.png",
  "https://gyazo.com/d58d893500f6551b155a1cb7b1099b74.png",
];

/***/
let slider = document.getElementById("slider");
let index = 0, images /* список <img> внутри slider */;

(function __init__() {
  slider.innerHTML = data.map(src => `<img src="${ src }">`).join("");
  
  images = slider.querySelectorAll("img");
  images[index].classList.add("opaque");
})();

function next() {
  images[index].classList.remove("opaque");
  index = (index + 1) % images.length;
  images[index].classList.add("opaque");
}

function prev() {
  images[index].classList.remove("opaque");
  index = (index - 1 + images.length) % images.length;
  images[index].classList.add("opaque");
}

(function _loop() {
  next();
  setTimeout(_loop, 4000);
})();

#slider {
  position: relative;
}

#slider img {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 200px;
  height: 200px;
  
  opacity: 0;
  transition: opacity 2s;
}

#slider img.opaque {
  opacity: 1;
}

<div id="slider"></div>

БЛОГ НА HUSL

слайдер на чистом js. Плавное переключение картинок

Ответы (1 шт):