TikTok Tutorial #77 - How to create a Catchy Carusel Component in Javascript

Learn with us how to create an amazing Carusel in Javascript!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

<!-- insperation https://dribbble.com/shots/2575761-Webshop-UI-UX-experiments -->

<div class="loadPage shown">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/orange-01.svg" />
</div>
<div class="elementWrapper">
  <div class="elementItemWrapper">
    <div class="elementItem superfarLeft"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Strawberry-01.svg
" /></div>
    <div class="elementItem farLeft">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/pineapple-01.svg
" />
    </div>
    <div class="elementItem left">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Pancakes-01.svg
" />
    </div>
    <div class="elementItem active">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/orange-01.svg" />
    </div>
    <div class="elementItem right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/grape-green-01.svg
" /></div>
    <div class="elementItem farRight"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Berry_red-01.svg
" /></div>
    <div class="elementItem superfarRight">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/chocolate_2-01.svg
" /></div>
  </div>
  <div class="elementArrowWrapper">
    <div class="elementArrow arrowLeft">
      <svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path
  d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z"
  fill="#fff"/></svg>
    </div>
     <div class="elementArrow arrowRight">
       <svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path
  d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z"
  fill="#fff"/></svg>
    </div>
  </div>
   <div class="elementBackgroundWrapper">
    <div class="elementBackground backgroundLeft">
    </div>
     <div class="elementBackground backgroundRight">
    </div>
  </div>
    <div class="elementContent">
       <div class="elementContentWrapper left">
         <p>UI </p>
         <h1>Creative Tim</h1>
         <p>Check the link in bio.</p>
      </div>
      <div class="elementContentWrapper active">
         <p>UI</p>
         <h1>Creative Tim (again)</h1>
         <p>Check the link in bio now.</p>
      </div>
      <div class="elementContentWrapper right">
         <p>UI</p>
         <h1>Guess who? Creative Tim</h1>
         <p>You know what you have to do.</p>
      </div>
  </div>
</div>

2. CSS Code

body {
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.elementWrapper {
  overflow:hidden;
  position:relative;
  border-radius: 4px;
  background: #dd6b8c;
  padding: 0px;
  width: 400px;
  height:600px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.44);
  display: flex;
}
.elementArrowWrapper{
   width: 100%;
  position: absolute;
  bottom: 17%;
  height: 21.5%;
  text-align: center;
  z-index: 5;
}
.elementArrow{
  width: 150px;
    height: 150px;
    background: #000;
    position: absolute;
    transform-origin: center;
    transition: all .7s ease;
  opacity:1;
}
.arrowLeft{
  transform: translate(-73%) rotate(45deg);
}
.arrowLeft svg{
      transform: rotate(-45deg) translate(79%,125%);
}
.arrowRight svg{
      transform: rotate(-45deg) translate(-307%,125%);
}
.arrowRight{
  right:0;
  transform: translate(73%) rotate(45deg);
}
.elementBackgroundWrapper{
  width: 100%;
  position: absolute;
  bottom: 55%;
  height: 22%;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.elementBackground{
  width: 400px;
  position: absolute;
  z-index:-1;
  opacity:.4;
  height: 400px;
  background-color: #fff;
  transform: rotate(45deg);
}
.backgroundLeft{
  transform: translate(-65%) rotate(45deg);
}
.backgroundRight{
  right:0;
  transform: translate(65%) rotate(45deg);
}
.elementItemWrapper{
      width: 100%;
    position: absolute;
    bottom: 40%;
    height: 40%;
    text-align: center;
    z-index:2;
}
.elementItem {
    width: 150px;
    height: 150px;
    background: #fff;
    position: absolute;
    transform: translate(83.5%,0%) rotate(45deg);
    transform-origin: center;
    transition: all .4s ease;
  opacity:1;
}
.elementItem img{
    transform: rotate(-45deg);
    max-width: 150px;
    padding: 10px;
}

.elementContentWrapper {
    width: 60%;
    margin: 0 auto;
    position: absolute;
    transform: translate(34%,0);
    opacity:1;
    transition:all .4s ease;
}
.elementContentWrapper.left{ transform: translate(-40%,100%); opacity:0;}
.elementContentWrapper.right{transform: translate(104%,100%); opacity:0;}

.elementItem.left {
    transform: translate(0%,82%) rotate(45deg);
    opacity:.75;
}

.elementItem.right {
    transform: translate(167%,82%) rotate(45deg);
    opacity:.75;
}
.elementItem.farRight {
    transform: translate(250%,0%) rotate(45deg);
    opacity:.75;
}
.elementItem.superfarRight {
    transform: translate(341%,-82%) rotate(45deg);
    opacity:.0;
}
.elementItem.farLeft {
    transform: translate(-82%,0%) rotate(45deg);
    opacity:.75;
}
.elementItem.superfarLeft {
    transform: translate(-164%,-82%) rotate(45deg);
    opacity:.0;
}



.elementContent {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 33.6%;
    text-align: center;
  z-index:2;
}
.elementContent:before {
    content: '';
    width: 400px;
    position: absolute;
    z-index:-1;
    left: 0;
    height: 400px;
    background-color: #fff;
    transform: rotate(45deg);
}
.elementContent:after {
    content: '';
    width: 400px;
    position: absolute;
    z-index: -17;
    top: -122%;
    left: 0;
    height: 400px;
    border: 1px solid #fff;
    /* background-color: #E91E63; */
    transform: rotate(45deg);
}

img{width:100%;}

.loadPage{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background: rgb(251, 173, 196);
  pointer-events:none;
}

.loadPage{
  transition:all .5s ease;
}
.loadPage img{
  max-width:200px;
}

3. Javascript Code

$('.arrowRight').click(function(){
  var elsuperfarLeft = $('.elementItem.superfarLeft');
  var elfarLeft = $('.elementItem.farLeft');
  var elLeft = $('.elementItem.left');
  var elMiddle = $('.elementItem.active');
  var elRight = $('.elementItem.right');
  var elfarRight = $('.elementItem.farRight');
  var elsuperfarRight = $('.elementItem.superfarRight');
  var eltextMiddle = $('.elementContentWrapper.active');
  var eltextLeft = $('.elementContentWrapper.left');
  var eltextRight = $('.elementContentWrapper.right');
 
  elMiddle.removeClass('active').addClass('right');
  elLeft.removeClass('left').addClass('active');
  elfarLeft.removeClass('farLeft').addClass('left');
  elRight.removeClass('right').addClass('farRight');
  elfarRight.removeClass('farRight').addClass('superfarRight');
  elsuperfarLeft.removeClass('superfarLeft').addClass('farLeft');
  elsuperfarRight.removeClass('superfarRight').addClass('superfarLeft');
  
  eltextMiddle.removeClass('active').addClass('right');
  eltextLeft.removeClass('left').addClass('active');
  eltextRight.removeClass('right').addClass('left');
  
  
});

$('.arrowLeft').click(function(){
  var elsuperfarLeft = $('.elementItem.superfarLeft');
  var elfarLeft = $('.elementItem.farLeft');
  var elLeft = $('.elementItem.left');
  var elMiddle = $('.elementItem.active');
  var elRight = $('.elementItem.right');
  var elfarRight = $('.elementItem.farRight');
  var elsuperfarRight = $('.elementItem.superfarRight');
  var eltextMiddle = $('.elementContentWrapper.active');
  var eltextLeft = $('.elementContentWrapper.left');
  var eltextRight = $('.elementContentWrapper.right');
  
  elMiddle.removeClass('active').addClass('left');
  elLeft.removeClass('left').addClass('farLeft');
  elRight.removeClass('right').addClass('active');
  elfarLeft.removeClass('farLeft').addClass('superfarLeft');
  elfarRight.removeClass('farRight').addClass('right');
  elsuperfarLeft.removeClass('superfarLeft').addClass('superfarRight');
  elsuperfarRight.removeClass('superfarRight').addClass('farRight');
  
  eltextMiddle.removeClass('active').addClass('left');
  eltextLeft.removeClass('left').addClass('right');
  eltextRight.removeClass('right').addClass('active');
});

var show = function(){
$('.loadPage.shown').fadeOut('slow');
};
setTimeout(show, 2000);

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

• TikTok
• Instagram
• Twitter
• Facebook
• Blog

Other useful resources:

• Free Resources (UI Kits, Admin, and Mobile Templates)
• UI/UX Design Book
• Tailwind CSS UI/UX Design Course - Code Included
• The Ultimate UI/UX Design Course