Learn how to implement the Carousel interface using the animation properties of CSS3. The reason for using Carousel in the homepage is that you can move major contents to the left and right in order. I think it's best to show you the content you want to emphasize in a limited space. It's also effective in terms of user experience..


Here's what you'll think about first in order to implement Carousel UI:

  • i. How will animation be implemented?
  • ii. Which code automatically moves on to the next?

Scripts are available for implementing animation, but here we try to minimize the use of scripts. Therefore, only the essential parts are scripted, and all the rest are CSS-enabled, especially CSS3's animation and @keyframes queries.

In fact, it's hard to say that this is more effective than scripting. Learning to use JavaScript DOM effectively is also a good way to do it! The goal is that we can implement it in this way.
First, I want to minimize the use of scripts, but what are the essential parts of the script? CSS is not the only solution for the part below...

- Click and switch to next or previous
- Automatically move to next after a certain amount of time

Let's start by creating an example to find out more.

# Example source code using CSS 3 for Carousel UI

CSS and HTML code implemented first.

@ HTML code
Below is the html code.
<span>Carousel css3 animation</span>
<div id="carousel">
  <nav>
    <div class="gallery-view no1" id="gallery">
      <div class="no3 no">
        3
      </div>
      <div class="no1 no">
        1
      </div>
      <div class="no2 no">
        2
      </div>
      <div class="no3 no">
        3
      </div>
      <div class="no1 no">
         1
      </div>
    </div>
    <div class="control">
      <button onclick="toLeft();">&lt;</button>
      <button onclick="toRight();">&gt;</button>
    </div>
  </nav>
</div>


@ CSS code
The following is the CSS code:
#carousel .gallery-view {
  border: 2px solid #000;
  width: 108px;
  height: 54px;
  margin: 0 auto 5px;
  white-space: nowrap;
  letter-spacing: -4px;
}
#carousel .gallery-view .no {
  box-sizing: border-box;
  text-align: center;
  padding: 14px;
  position: relative;
  left: -100px;
  width: 100px;
  height: 50px;
  display: inline-block;
  background: #ffd6c3;
  letter-spacing: 0;
}
/* Animation */
#carousel .gallery-view.no1 .no {
  left: -100px;
  animation: no3 0.5s linear 1;
}
#carousel .gallery-view.no2 .no {
  left: -200px;
  animation: no1 0.5s linear 1;
}
#carousel .gallery-view.no3 .no {
  left: -300px;
  animation: no2 0.5s linear 1;
}
#carousel .gallery-view.no1.lt .no {
  animation: no1lt 0.5s linear 1;
}
#carousel .gallery-view.no2.lt .no {
  animation: no2lt 0.5s linear 1;
}
#carousel .gallery-view.no3.lt .no {
  animation: no3lt 0.5s linear 1;
}

@keyframes no1 {
  0%   {left: -100px;}
  50%  {left: -150px;}
  100% {left: -200px;}
}
@keyframes no2 {
  0%   {left: -200px;}
  50%  {left: -250px;}
  100% {left: -300px;}
}
@keyframes no3 {
  0%   {left: -300px;}
  50%  {left: -350px;}
  100% {left: -400px;}
}
@keyframes no1lt {
  0%   {left: -200px;}
  50%  {left: -150px;}
  100% {left: -100px;}
}
@keyframes no2lt {
  0%   {left: -300px;}
  50%  {left: -250px;}
  100% {left: -200px;}
}
@keyframes no3lt {
  0%   {left: -100px;}
  50%  {left: -50px;}
  100% {left: 0px;}
}

The next essential script is as follows.
For your information, the code below uses a large number of global variables. I think it's better to avoid using global variables, right It looks good to make the appropriate changes.
toRight = function() {
  galleryEle = document.querySelector('#gallery');
  galleryEle.classList.remove('lt');
  if (galleryEle.classList.contains('no1')) {
    galleryEle.classList.remove('no1');
    galleryEle.classList.add('no2');
  }
  else if (galleryEle.classList.contains('no2')) {
    galleryEle.classList.remove('no2');
    galleryEle.classList.add('no3');
  }
  else if (galleryEle.classList.contains('no3')) {
    galleryEle.classList.remove('no3');
    galleryEle.classList.add('no1');
  }
  timer = 0;
};

toLeft = function() {
  galleryEle = document.querySelector('#gallery');
  if (galleryEle.classList.contains('no1')) {
    galleryEle.classList.remove('no1');
    galleryEle.classList.add('no3');
    galleryEle.classList.add('lt');
  }
  else if (galleryEle.classList.contains('no2')) {
    galleryEle.classList.remove('no2');
    galleryEle.classList.add('no1');
    galleryEle.classList.add('lt');
  }
  else if (galleryEle.classList.contains('no3')) {
    galleryEle.classList.remove('no3');
    galleryEle.classList.add('no2');
    galleryEle.classList.add('lt');
  }
  timer = 0;
};

setTimeout(function() {
  timer = 0;
  (function aniBinder() {
    setTimeout(function() {
      timer = timer || 1;
      if (timer === 5) {
        galleryEle = document.querySelector('#gallery');
        galleryEle.classList.remove('lt');
        if (galleryEle.classList.contains('no1')) {
          galleryEle.classList.remove('no1');
          galleryEle.classList.add('no2');
         }
         else if (galleryEle.classList.contains('no2')) {
            galleryEle.classList.remove('no2');
            galleryEle.classList.add('no3');
         }
         else if (galleryEle.classList.contains('no3')) {
           galleryEle.classList.remove('no3');            
           galleryEle.classList.add('no1');
         }
         timer = 0;
        }   
        ++timer;
        aniBinder();
    }, 1000);
  })();
}, 2000);

Below you can see the animation you've done. Since various animation can be created and implemented in css3, it would be good to utilize the properties.


! Carousel UI example, actual operation
If you implement the above example, it will appear as follows:
<span>Carousel css3 animation</span>
<div id="carousel">
<nav>
<div class="gallery-view no1" id="gallery">
<div class="no3 no">
3
</div>
<div class="no1 no">
1
</div>
<div class="no2 no">
2
</div>
<div class="no3 no">
3
</div>
<div class="no1 no">
1
</div>
</div>
<div class="control">
<button onclick="toLeft();"><</button>
<button onclick="toRight();">></button>
</div>
</nav>
</div>
<style>
#carousel .gallery-view {
border: 2px solid #000;
width: 108px;
height: 54px;
margin: 0 auto 5px;
white-space: nowrap;
letter-spacing: -4px;
}
#carousel .gallery-view .no {
box-sizing: border-box;
text-align: center;
padding: 14px;
position: relative;
left: -100px;
width: 100px;
height: 50px;
display: inline-block;
background: #ffd6c3;
letter-spacing: 0;
}
/* Animation */
#carousel .gallery-view.no1 .no {
left: -100px;
animation: no3 0.5s linear 1;
}
#carousel .gallery-view.no2 .no {
left: -200px;
animation: no1 0.5s linear 1;
}
#carousel .gallery-view.no3 .no {
left: -300px;
animation: no2 0.5s linear 1;
}
#carousel .gallery-view.no1.lt .no {
animation: no1lt 0.5s linear 1;
}
#carousel .gallery-view.no2.lt .no {
animation: no2lt 0.5s linear 1;
}
#carousel .gallery-view.no3.lt .no {
animation: no3lt 0.5s linear 1;
}

@keyframes no1 {
0% {left: -100px;}
50% {left: -150px;}
100% {left: -200px;}
}
@keyframes no2 {
0% {left: -200px;}
50% {left: -250px;}
100% {left: -300px;}
}
@keyframes no3 {
0% {left: -300px;}
50% {left: -350px;}
100% {left: -400px;}
}
@keyframes no1lt {
0% {left: -200px;}
50% {left: -150px;}
100% {left: -100px;}
}
@keyframes no2lt {
0% {left: -300px;}
50% {left: -250px;}
100% {left: -200px;}
}
@keyframes no3lt {
0% {left: -100px;}
50% {left: -50px;}
100% {left: 0px;}
}
</style>
<script>
toRight = function() {
galleryEle = document.querySelector('#gallery');
galleryEle.classList.remove('lt');
if (galleryEle.classList.contains('no1')) {
galleryEle.classList.remove('no1');
galleryEle.classList.add('no2');
}
else if (galleryEle.classList.contains('no2')) {
galleryEle.classList.remove('no2');
galleryEle.classList.add('no3');
}
else if (galleryEle.classList.contains('no3')) {
galleryEle.classList.remove('no3');
galleryEle.classList.add('no1');
}
timer = 0;
};
toLeft = function() {
galleryEle = document.querySelector('#gallery');
if (galleryEle.classList.contains('no1')) {
galleryEle.classList.remove('no1');
galleryEle.classList.add('no3');
galleryEle.classList.add('lt');
}
else if (galleryEle.classList.contains('no2')) {
galleryEle.classList.remove('no2');
galleryEle.classList.add('no1');
galleryEle.classList.add('lt');
}
else if (galleryEle.classList.contains('no3')) {
galleryEle.classList.remove('no3');
galleryEle.classList.add('no2');
galleryEle.classList.add('lt');
}
timer = 0;
};

setTimeout(function() {
timer = 0;
(function aniBinder() {
setTimeout(function() {
timer = timer || 1;
if (timer === 5) {
galleryEle = document.querySelector('#gallery');
galleryEle.classList.remove('lt');
if (galleryEle.classList.contains('no1')) {
galleryEle.classList.remove('no1');
galleryEle.classList.add('no2');
}
else if (galleryEle.classList.contains('no2')) {
galleryEle.classList.remove('no2');
galleryEle.classList.add('no3');
}
else if (galleryEle.classList.contains('no3')) {
galleryEle.classList.remove('no3');
galleryEle.classList.add('no1');
}
timer = 0;
}
++timer;
aniBinder();
}, 1000);
})();
}, 2000);
</script>