In this tutorial, we will create a vertical slider with content navigation and a progress bar using Slick.
First, make sure to include jQuery and slick assets in your document.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />HTML Markup
Here is a simplified markup.
We have a div with a class of row. Inside this row are the image and the text column.
For the image column, there is a new div with a class of “img-holder.” This will be our image slide.
For the text column, the slide is the div with a class of “content-item.”
We will duplicate these slides to create new ones.
Next, let’s modify the image sources.
Let’s also update the text content.
<div class="container">
<div class="container-inner">
<div class="row">
<div class="img-column">
<div class="img-grp">
<div class="img-holder">
<span><img src="images/add-account.jpg"></span>
</div><!--img-holder-->
<div class="img-holder">
<span><img src="images/social.jpg"></span>
</div><!--img-holder-->
<div class="img-holder">
<span><img src="images/add-account-3.jpg"></span>
</div><!--img-holder-->
<div class="img-holder">
<span><img src="images/upgrade.jpg"></span>
</div><!--img-holder-->
<div class="img-holder">
<span><img src="images/add-account-2.jpg"></span>
</div><!--img-holder-->
</div>
</div>
<div class="detail-column">
<div class="content-grp">
<div class="content-item">
<div class="item-inner">
<span class="bar"></span>
<h4>Add Account</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div><!--content-item-->
<div class="content-item">
<div class="item-inner">
<span class="bar"></span>
<h4>Social Permissions</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div><!--content-item-->
<div class="content-item">
<div class="item-inner">
<span class="bar"></span>
<h4>Create a Personal Account</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div><!--content-item-->
<div class="content-item">
<div class="item-inner">
<span class="bar"></span>
<h4>Upgrade</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div><!--content-item-->
<div class="content-item">
<div class="item-inner">
<span class="bar"></span>
<h4>Add New Account</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div><!--content-item-->
</div>
</div>
</div>
</div>
</div>Adding CSS
Add flex CSS to the row container element.
Ensure the images are at a maximum of 100 percent of the container.
The first column will be 60% width and 40% for the text column.
Add some padding to the slide element so our box shadow will appear when we add one.
Set the span element into a block element, then add a shadow.
The “content-item” is our text group or slide. Let’s add padding.
Also, add some padding to the inner content.
The span bar element will be our progress bar.
Add display block. Set the height and add a 100% width. Then add a light color background.
Add position absolute to move it to the top and the very left.
Style the pseudo-element called after for the progress bar.
Set the background to vibrant color.
For the animation, let’s create a new keyframe called progress.
Set the width from zero to a width of 100%.
Now, on the pseudo-element, add the keyframe and then the duration. In this case, it will be 5 seconds.
We’re almost done adding the CSS.
Now, let’s activate the slick slider function for these elements.
.img-holder{
padding: 15px;
}
.img-holder span{
display: block;
box-shadow: 0 5px 10px rgb(0 0 0 / .1);
}
.img-holder img{
max-width: 100%;
border-radius:8px
}
.content-item{
padding: 0 15px
}
.item-inner{
padding: 30px;
position: relative;
overflow:hidden;
max-height: 70px;
transition: .5s ease;
}
span.bar{
display:block;
height:4px;
width: 100%;
background: rgb(255 131 107 / .15);
position:absolute;
left: 0;
top:0;
visibility: hidden
}
span.bar::after{
content:"";
position:absolute;
width: 100%;
height: 100%;
background: #ff836b;
animation: progress 5s infinite;
}
@keyframes progress{
from{
width:0;
}
to{
width:100%;
}
}
.slick-current.current-item{
padding: 15px;
}
.slick-current .item-inner{
max-height: unset;
box-shadow: 0 5px 10px rgb( 0 0 0 / .1);
border-radius: 5px;
}
.slick-current span.bar{
visibility: visible;
}
.slick-vertical .slick-slide.content-item:not(.slick-current) .item-inner{
border-bottom: 1px solid #ebebeb
}
.detail-column .slick-list.draggable{
height: auto !important;
}Activate the Slick Function
First, let’s add a slick to the image container.
Add a width property since the slick function overrides our container styles.
Returning to the slick configuration, set the slides to scroll to 1. Fade to true. Hide the arrows. Autoplay is true.
For autoplay speed, let’s march the one we set for the bar animation, which is 5 seconds. So here, add 5000 milliseconds.
To set our text content as navigation, add as nav for with the value of the parent element of these text content.
Next, add the slick function and configuration to the text container.
Hide the arrows. Set the vertical to true. Slides to show would be 3. The focus on select is true.
Then add the as Nav for with the value of the image container group.
Our slick sliders are in autoplay, and a slide is currently active.
Let’s add some style for the elements inside the currently active slide.
For the “current-item” container, add padding.
Let’s add a maximum height and reset when it’s the current slide.
Set the infinite to false.
Hide the progress bar if it’s not the current slide. Then show it when it is.
Let’s add some border.
Override the slick list style height to auto.
jQuery(document).ready(function(){
$('.img-grp').slick({
infinite: true,
slidesToShow:1,
fade: true,
arrows: false,
autoplay: true,
autoplaySpeed: 5000,
pauseOnHover: true,
asNavFor: '.content-grp'
});
$('.content-grp').slick({
arrows:false,
vertical:true,
slidesToShow: 3,
focusOnSelect: true,
asNavFor: '.img-grp',
infinite:false,
centerMode: false
});
});
