Issue with image slider loop functionality not functioning properly

Question

Issue with image slider loop functionality not functioning properly

Looking to incorporate this image slider into my website: http://codepen.io/rslglover/pen/DBvoA

The slider functions properly, but it halts after completing its cycle. I'm unsure of what distinguishes the CodePen code from mine. How can I replicate the continuous functionality present in the CodePen example?

article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}

article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

Here is my HTML setup:

<div class="galleryInfo">
    <div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>

html css

Answer 1

Answer №1

Take a look at this:
HTML:

<div class="galleryInfo">
    <div class="gallery">
<section>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
      </div>
</div>

CSS:

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 450px;
  background: #292929;
  color: #e3e3e3;
  width: 450px;
  height: 450px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 0px;
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

Alternatively, you can adjust the position in the CSS file for the classes galleryInfo and gallery above the animation.

Answer 2

Take a look at this:
HTML:

<div class="galleryInfo">
    <div class="gallery">
<section>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
      </div>
</div>

CSS:

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 450px;
  background: #292929;
  color: #e3e3e3;
  width: 450px;
  height: 450px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 0px;
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

Alternatively, you can adjust the position in the CSS file for the classes galleryInfo and gallery above the animation.

Answer 3

Answer №2

If your animation seems to pause, it is likely because the CSS is set up for 10 slides.

To keep the same timing and animation effect, you will need to adjust the keyframes percentages based on the total number of slides being used.

@keyframes slideIn{
    0% {left: 200px;} /* Always start at 0% */
    2.5% {left: 0;} /* Equivalent to 0.5 seconds e.g. 0.5/maxTime*100 */
    25% {left: 0;} /* Equivalent to 5 seconds e.g. 5/maxTime*100 */
    27.5% {left: -200px;} /* Equivalent to 5.5 seconds e.g. 5.5/maxTime*100 */
    100%{left: -200px;} /* Always end at 100% */
}

Adjusting the keyframes will help maintain the same speed for each slide in your codepen example.

Below is a functional code snippet.

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/* section:hover article{
  animation-play-state: paused;
} */

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

/*
 * Since each slide's animation lasts 5 seconds, the total duration is calculated as totalSlides * 5.
 */ 
article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;} /* Always start at 0% */
  2.5% {left: 0;} /* Equivalent to 0.5 seconds e.g. 0.5/maxTime*100 */
  25% {left: 0;} /* Equivalent to 5 seconds e.g. 5/maxTime*100 */
  27.5% {left: -200px;} /* Equivalent to 5.5 seconds e.g. 5.5/maxTime*100 */
  100%{left: -200px;} /* Always end at 100% */
}

<section>
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
  <article>Slide 4</article>
</section>

Answer 4

If your animation seems to pause, it is likely because the CSS is set up for 10 slides.

To keep the same timing and animation effect, you will need to adjust the keyframes percentages based on the total number of slides being used.

@keyframes slideIn{
    0% {left: 200px;} /* Always start at 0% */
    2.5% {left: 0;} /* Equivalent to 0.5 seconds e.g. 0.5/maxTime*100 */
    25% {left: 0;} /* Equivalent to 5 seconds e.g. 5/maxTime*100 */
    27.5% {left: -200px;} /* Equivalent to 5.5 seconds e.g. 5.5/maxTime*100 */
    100%{left: -200px;} /* Always end at 100% */
}

Adjusting the keyframes will help maintain the same speed for each slide in your codepen example.

Below is a functional code snippet.

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/* section:hover article{
  animation-play-state: paused;
} */

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

/*
 * Since each slide's animation lasts 5 seconds, the total duration is calculated as totalSlides * 5.
 */ 
article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;} /* Always start at 0% */
  2.5% {left: 0;} /* Equivalent to 0.5 seconds e.g. 0.5/maxTime*100 */
  25% {left: 0;} /* Equivalent to 5 seconds e.g. 5/maxTime*100 */
  27.5% {left: -200px;} /* Equivalent to 5.5 seconds e.g. 5.5/maxTime*100 */
  100%{left: -200px;} /* Always end at 100% */
}

<section>
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
  <article>Slide 4</article>
</section>

Issue with image slider loop functionality not functioning properly

Answer №1

Answer №2

Similar questions

"Using PHP to generate HTML code for creating a hyperlink with

Ensure that all floating divs have uniform height

Utilizing AngularJS to display numerous charts on a single webpage

Tips for showcasing cards in a horizontal inline layout

React-select is failing to align properly with flexbox styling

Issue with Django and Bootstrap navbar button and search field interaction

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Hover over me to see the CSS animation translate upwards until it reaches a specific point

Header and footer that remain in place while the content scrolls smoothly

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

jQuery: Extracting text labels from checkboxes

"Styling a play button on top of an image using CSS

Utilizing Javascript in Spotfire for enhanced functionality

Tips for sending data from an HTML page to an Angular custom element

Show two choices in a select box next to each other

Why is it necessary to separate PHP from HTML?

Is there a way to display the back and forward buttons on a popup window opened through window.open or self.open in Chrome browser?

Add the directive prior to rendering the HTML