Блог

Я работаю с чистым слайдером HTML / CSS, который возвращает пустой слайд после самого последнего изображения в соответствии с этой скрипкой JS (https://codepen.io/dudleystorey/pen/ehKpi )

Как вы сможете увидеть по этой ссылке (http://eavestroughcleaning.ca/temp.php ) загружается изображение (всего 3) и перемещается в «пустую» область, удерживаясь в течение 5 секунд, прежде чем перезагрузить / вернуться к первому. Javascript отсутствует, и вы можете просматривать исходный код напрямую, однако, здесь это для хорошей оценки.

CSS:

     @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }

    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 10s slidy infinite; 
    }
  

HTML:

     <div id="slider">
    <figure>
    <img src="slider-img1.jpg" alt></figure>
    <figure><img src="slider-img2.jpg" alt></figure>
    <figure><img src="slider-img3.jpg" alt></figure>
    </div>
  

Из моих исследований кажется, что эта проблема носит спорадический характер и, вероятно, основана на браузере или даже, возможно, на ОС (очевидно) Мне еще предстоит найти решение. Я использую Windows 10 (все обновлено) с Fire Mozilla Firefox (49.0.1). Я также попробовал это в Chrome для хорошей оценки, но, увы, столкнулся с той же проблемой. Предложения приветствуются.

Как уже упоминал @gaby-aka-g-petrioli, код CSS предназначен для 5 слайдов, а не для 3.

Попробуйте это:

 @keyframes slidy {
0% { left: 0%; }     /* 0 - 30% of animation time */
30% { left: 0%; }    /* 1st slide will be visible */
33% { left: -100%; } /* 30% - 33% slide change will occur */
63% { left: -100%; } /* etc.. */
66% { left: -200%; }
100% { left: -200%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }

div#slider figure img {
  width: 33.333%;    /* image will be 33.333% of total width */
  float: left;
}
div#slider figure { 
  position: relative;
  width: 300%;       /* total width of 3 slides (3*100%) */
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; /* length of animation */
}  

 <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="ibiza.jpg" alt>
  </figure>
</div>  

Предоставляемый вами слайдер предназначен для работы с 5 слайдами, вот почему у слайдера есть место, width: 500% где последний слайд отображается только при переходе к нему, затем анимация сбрасывается на первый слайд, и по этой причине у вас будет своего рода «прыжок» или «вспышка» вэкран.

Если вы хотите больше или меньше слайдов, вы должны поработать над слайдером width и установить его как количество слайдов, умноженное на 100%. И вы также должны изменить процент анимации, чтобы установить правильный переход между ними.

Решение с бесконечным циклом

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

С помощью этого решения, когда анимация завершена и переход находится на последнем слайде (который на самом деле является дублированным первым слайдом), infinite свойство в анимации сбрасывается и перезапускается, а последний дублированный слайд заменяется исходным первым слайдом без какого-либо плохого перехода к анимации.

Решение сброс слайдера на первый слайд

Наоборот, если вы предпочитаете сбросить ползунок и увидеть, как ползунок прокручивается обратно к первому изображению, в определении анимации при 100% вы должны сдвинуться до 0%

 @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: 0%; }
}