Блог

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

HTML:

 <section id='container_four'>

    <section class='carousel'>

      <section class='slides'>
          <div class='slide'><img src='img/spain1.jpeg' alt=''></div>
          <div class='slide'><img src='img/spain2.jpeg' alt=''></div>
          <div class='slide'><img src='img/spain3.jpeg' alt=''></div>
          <div class='slide' id='slide-index-3'><img src='img/spain4.jpeg' alt=''></div>
          <div class='slide'><img src='img/spain5.jpeg' alt=''></div>
          <div class='slide'><img src='img/spain6.jpeg' alt=''></div>
          <div class='slide'><img src='img/spain7.jpeg' alt=''></div>
          
      </section>

      <section class='slide-controls'>
        <button class='prev-btn'><img src='img/arrow_left.png' alt='arrow left'></button>
        <button class='next-btn'><img src='img/arrow_right.png' alt='arrow right'></button>
      </section>

      <input type='image' class='pause' src='img/pause.png'>

    </section>
 

JS:

 const carousel = document.querySelector('.carousel');
const slideGroup = document.querySelector('.slides');
const nextBtn = document.querySelector('.next-btn');
const prevBtn = document.querySelector('.prev-btn');
let playPause = document.querySelector('.pause');
let slide = document.querySelectorAll('.slide');
let index = 3;
let intervalId;

//--------------------------------------------
// Clone images
const cloneOne = slide[0].cloneNode(true);
const cloneTwo = slide[1].cloneNode(true);
const cloneThree = slide[2].cloneNode(true);
const cloneFour = slide[3].cloneNode(true);
const cloneFive = slide[4].cloneNode(true);
const cloneSix = slide[5].cloneNode(true);
const cloneSeven = slide[6].cloneNode(true);

// Add clones to start and end of slide group
slideGroup.prepend(cloneFour, cloneFive, cloneSix, cloneSeven);
slideGroup.append(cloneOne, cloneTwo, cloneThree, cloneFour); 

slide = document.querySelectorAll('.slide'); 

// Set the slide width
const width = slide[index].clientWidth; 
slideGroup.style.transform = `translateX(${-width * index}px)`;

// Start automatic loop on page load
const startSlide = () => intervalId = setInterval(nextSlide, 2000); 
startSlide();
window.addEventListener('load', () => {
    console.log('worked')
})

// When click the arrows...
// Move to next slide
function nextSlide() {
    console.log('nextslide works')
    index >= slide.length - 4 ? false : index  ;
    slideGroup.style.transform = `translateX(${-width * index}px)`;
    slideGroup.style.transition = '1s'; 
}
// Move to previous slide
function prevSlide() {
    index <= 0 ? false : index--;
    slideGroup.style.transform = `translateX(${-width * index}px)`;
    slideGroup.style.transition = '1s';
}
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

cloneOne.id = 'clone1';
cloneFive.id = 'clone5';
    
function transitionEnd() {
    console.log('transitionend works')
    if(slide[index].id === 'clone1') {
        slideGroup.style.transition = 'ease-in';
        index = 3;
        slideGroup.style.transform = `translateX(${-width * index}px)`; 
    }
    if(slide[index].id === 'clone5') {
        slideGroup.style.transition = 'none';
         index = 7;
        slideGroup.style.transform = `translateX(${-width * index}px)`;
    }
}
slideGroup.addEventListener('transitionend', transitionEnd); 

// When press play/pause button, start/stop and change icon
function playOrPause() {
    console.log('playpause works')
    if(!intervalId) {
        playPause.src = 'img/pause.png';
        return startSlide(); 
    } else {
        playPause.src = 'img/play.png';
        clearInterval(intervalId);
        intervalId = null;
    }
}
playPause.addEventListener('click', playOrPause)

// Play/pause button mouseover event
playPause.addEventListener('mouseout', () => playPause.style.opacity = '0');
playPause.addEventListener('mouseover', () => playPause.style.opacity = '1');

// Keyboard function
function onKeydown(e) {
    switch(e.key) {
        case 'ArrowLeft':
            prevSlide();
            break;
        case 'ArrowRight':
            nextSlide();
            break;
        case 32:
            e.preventDefault();
            playOrPause();
    }
}
document.addEventListener('keydown', onKeydown);
 

CSS:

 #container_four {
  background-color: #DED6D3;
  padding: 5% 0%;
}
.carousel {
  width: 100vw;
  height: auto;
  margin: auto;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slides {
  display: flex; 
} 
.slide {
  min-width: 25%;
}
.slide img {
  width: 80%; 
}
.slide-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
.slide-controls img {
  width: 2vw;
  cursor: pointer;
}
.next-btn,
.prev-btn {
  background: transparent;
  border: none;
  padding: 2vw;
}
.next-btn:focus,
.prev-btn:focus {
  outline: none;
}
.play, 
.pause {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  width: 4vw;
  outline: none;
  padding: 15% 25%;
}
 

Я добавил журналы консоли в каждую функцию и обнаружил, что прослушиватель transitionend событий не запускается. Я даже пытался переписать его по-разному. Единственное, что заставляет его срабатывать, — это если я обновлю браузер!

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

Чтобы было понятно, эта проблема возникает только при самой первой загрузке страницы, поэтому повторный просмотр страницы будет работать корректно. Он не работает только тогда, когда вы открываете новый браузер без истории веб-сайта.

Вот страница: https://chunzg.github.io/carousel / Github ссылка на код: https://github.com/chunzg/carousel