Vertical Carousel Slider with Animated Text

by
Vertical Carousel Slider with Animated Text
Code Snippet:Vertical Parallax Swiper slider
Author: md aqil
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 754
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (6 KB)

This code creates a vertical carousel slider with animated text. It utilizes Swiper.js for smooth sliding. The slider has navigation buttons and pagination for easy browsing. The text animations and color changes add visual appeal.

You can use this code to create engaging presentations or dynamically showcase content. Its vertical carousel slider is handy for displaying team information or product features. One benefit is its ability to captivate attention with smooth animations.

How to Create Vertical Carousel Slider With Animated Text

1. First of all, load the Swiper CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css'>

2. Create the HTML structure for the animated carousel. Include necessary classes and IDs to connect with the CSS and JavaScript.

<!-- Swiper -->
   <div class="colored-container">

  <div class="swiper-container verticle-animation">
     <div class="halfbox team-info">
        <li class="team-info-item active">
          <h1 class="heading">Hi, my name is Aqil </h1>
             <article class="content">
                <p>
                  I'm AU/UX designer developer
                  please don't forget to like <br>
                  your likes Mean A lot to me
             
                  </p>
                  <p>
                    Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
                  </p>
                  <p>
                    Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
                  </p>

            </article>
      </li>
        <li class="team-info-item active">
          <h1 class="heading">Hi, my name is Aqil </h1>
             <article class="content">
                <p>
                  I'm AU/UX designer developer
                  please don't forget to like <br>
                  your likes Mean A lot to me
             
                  </p>
                  <p>
                    Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
                  </p>
                  <p>
                    Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
                  </p>

            </article>
      </li>
        <li class="team-info-item active">
          <h1 class="heading">Hi, my name is Aqil </h1>
             <article class="content">
                <p>
                  I'm AU/UX designer developer
                  please don't forget to like <br>
                  your likes Mean A lot to me
             
                  </p>
                  <p>
                    Fork on Github <a href="https://github.com/md-aqil">Md Aqil</a>
                  </p>
                  <p>
                    Find My Portfolio: <a href="https://mdaqil.tk">Md Aqil</a>
                  </p>

            </article>
      </li>
       
     </div>
    <div class="swiper-wrapper">
    
       
       <div class="swiper-slide">
          <div class="slidebox">
            <div class="flex-left">
                <div class="bordered-img">
              <div class="tag-box" data-swiper-parallax="-300">
                fay
              </div>
              <img src="http://md-aqil.github.io/images/beautiful-beauty-face-2657838.jpg" alt="">
              </div>
            </div>
          
            <div class="content-box">
              <div class="title" data-swiper-parallax="-300">
                <span>mrs</span>italy
              </div>
              <div class="subtitle" data-swiper-parallax="-200">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
              </div>
              <button class="btn btn-main">
                Shop Now
              </button>
              
         
            </div>
            
          </div>
        </div>
         <div class="swiper-slide">
          <div class="slidebox">
            <div class="flex-left">
                <div class="bordered-img">
              <div class="tag-box" data-swiper-parallax="-300">
                fay
              </div>
                            <img src="http://md-aqil.github.io/images/bikini-body-female-881583.jpg" alt="">

              </div>
            </div>
          
            <div class="content-box">
              <div class="title" data-swiper-parallax="-300">
                <span>mrs</span>italy
              </div>
              <div class="subtitle" data-swiper-parallax="-200">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
              </div>
              <button class="btn btn-main">
                Shop Now
              </button>
              
         
            </div>
            
          </div>
        </div>
         <div class="swiper-slide">
          <div class="slidebox">
            <div class="flex-left">
                <div class="bordered-img">
              <div class="tag-box" data-swiper-parallax="-300">
                fay
              </div>
                            <img src="http://md-aqil.github.io/images/afro-afro-hair-attractive-2603391.jpg" alt="">
              
              </div>
            </div>
          
            <div class="content-box">
              <div class="title" data-swiper-parallax="-300">
                <span>mrs</span>italy
              </div>
              <div class="subtitle" data-swiper-parallax="-200">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
              </div>
              <button class="btn btn-main">
                Shop Now
              </button>
              
         
            </div>
            
          </div>
        </div>
         <div class="swiper-slide">
          <div class="slidebox">
            <div class="flex-left">
                <div class="bordered-img">
              <div class="tag-box" data-swiper-parallax="-300">
                fay
              </div>
                <img src="http://md-aqil.github.io/images/beautiful-bikini-daylight-745767.jpg" alt="">

              </div>
            </div>
          
            <div class="content-box">
              <div class="title" data-swiper-parallax="-300">
                <span>mrs</span>italy
              </div>
              <div class="subtitle" data-swiper-parallax="-200">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
              </div>
              <button class="btn btn-main">
                Shop Now
              </button>
              
         
            </div>
            
          </div>
        </div>
        
         <div class="swiper-slide">
          <div class="slidebox">
            <div class="flex-left">
                <div class="bordered-img">
              <div class="tag-box" data-swiper-parallax="-300">
                fay
              </div>
                             <img src="http://md-aqil.github.io/images/adolescent-beautiful-beauty-247878.jpg" alt="">

              </div>
            </div>
          
            <div class="content-box">
              <div class="title" data-swiper-parallax="-300">
                <span>mrs</span>italy
              </div>
              <div class="subtitle" data-swiper-parallax="-200">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, id.
              </div>
              <button class="btn btn-main">
                Shop Now
              </button>
              
         
            </div>
            
          </div>
        </div>
        
    </div>

   <div class="slider-nav-wrapper">
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
   <div class="swiper-pagination"></div>
  </div>
</div>

3. Copy the following CSS code into your stylesheet. Adjust colors, sizes, and other styles as needed to match your design preferences.

:root {
      --dark-green: #9cc675;
      --dark-yellow: #e89a3d;
      --extra-light-brown:#fdf0d7;
      --light-brown: #ecd5ab;
      --dark-brown:#915b40;
      --light-yellow:#f8e3a8;
      --light-red:#f3ac99;
      --light-teal:#a6c8cc;
      --light-gray:#ddd5d6;

      --default-color: #a6c8cc;
      --secondry-color:   #e89a3d;
    }

    html, body {
      position: relative;
      height: 100%;
      font-family: sans-serif;
    }
   body{
      background: #eee !important;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
  position: relative;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
      
    }
    .swiper-slide {
      font-size: 18px;
      color:#fff;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 40px 60px;
    }
    .parallax-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 130%;
      height: 100%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
   
    .swiper-slide .subtitle {
      padding-left: 60px;
     
    }
    

    .colored-container {
      width: 100%;
      height: 100%;
      position: relative;
      background: #fff;

    }
    .halfbox {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--default-color);
    width: 50%;
    height: 100%;
    padding: 50px 50px;
    box-sizing: border-box;
    }
    .slidebox {
      position: relative;
      width: 450px;
    }
  
  .bordered-img {
    width: 350px;
    position: relative;
  }

  .bordered-img img{
    width: 100%;
    height: 100%;
    padding: 2px;
  }

.bordered-img:before, .bordered-img:after {
    content: '';
    border: 8px solid #fff;
    width: 100%;
    height: 96%;
    position: absolute;
    display: block;
  }
 .bordered-img:after {
  border-color: var(--secondry-color);
    top: 0;
    /* left: 2px; */
    width: 29%;
    right: -10px;
    border-left-width: 0;
 }

 .title {
  font-size: 50px;
  
    text-transform: uppercase;
    position: relative;
    
    letter-spacing: 3px;
    font-weight: bold;
    margin-left: 18px;
    color: var(--secondry-color);

 }
  .title >span {
    color: var(--default-color);
    margin-right: 15px;
  }

  .tag-box {
    --size: 110px;
    background: var(--default-color);
    /*color: var(--dark-brown);*/
    border: 5px solid #fff;
    width: var(--size);
    height: var(--size);
    position: absolute;
    left: -95px;
    top: 70px;
    font-size: 30px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 0 22px #00000029;
  }

.swiper-slide .subtitle {
    font-size: 18px;
    color: #888;
    font-weight: 300;
    padding: top;
    margin: 15px 0;
    margin-bottom: 50px;
}

.content-box {
       position: absolute;
    left: 62%;
    width: 300px;
    top: 8%;
    text-align: right;
}

.btn.btn-main {
  background: var(--secondry-color);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  border:none;
  position: relative;
  padding: 15px 40px;

}
.btn.btn-main:before {
  content: '';
  width: 5px;
  background: var(--dark-brown);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-nav-wrapper {
    width: 10%;
    position: absolute;
   top: 85%;
    margin: auto;
    left: 0;
    right: 0;
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background: var(--secondry-color);
    padding: 0px;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-position: center;
    padding: 3px;
    box-shadow: bord;
    box-sizing: border-box;
    background-size: 17px !important;
}

.verticle-animation .swiper-slide {
  display: flex;
  justify-content: flex-end;
}

.slidebox {
  margin-right: 100px;
  margin-top: 50px;
}

.swiper-pagination  {
  position: absolute;
  left: 0;
  right: inherit !important;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
   
    border-radius: 0;
    opacity: 1;
    margin: 14px 0 !important;
    transition: all .3s;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000000;
    width: 30px;
}

.team-info .team-info-item {
    font-size: 22px;
    padding: 15px 30px;
    display: none;
    position: absolute;
  display: none;
}

.team-info .team-info-item.active {
  display: block;
}


@-webkit-keyframes team-info-item {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}


.team-info-item.active .heading, .team-info-item.active .content{
  -webkit-animation-name: team-info-item;
  animation-name: team-info-item;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  
}
.team-info-item.active .content p {
font-weight: 300;
}
.team-info-item.active .content {
  -webkit-animation-delay: .2s;
}

4. Now, load the jQuery and Swiper JS by adding the following CDN links just before closing the body element:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'></script>

5. Finally, add the following JavaScript function to initialize the Swiper carousel. Edit the content within each .swiper-slide div to add your text, images, or any other elements you want to display in the slider.

var colors = [
      '--dark-green',
      '--light-brown',
     
      '--light-red',
      '--light-teal',
      '--light-gray',
    ];


    var swiperverticle = new Swiper('.swiper-container.verticle-animation', {
      speed: 600,
      parallax: true,
      direction: 'vertical',
         mousewheel: true,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },


    });

     swiperverticle.on('slideChange', function () {
      var index = this.activeIndex;

      // $('.halfbox').css({background: 'var('+colors[index % colors.length]+')'});

      $('.team-info .team-info-item').removeClass('active').eq(this.activeIndex).addClass('active')
      });

That’s all! hopefully, you have successfully created a Vertical Carousel Slider on your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X