HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development Javascript

Vertical Slick Slider with Progress Bar [CODE]

in Javascript
Reading Time: 5 mins read
403 31
0
596
SHARES
2.7k
VIEWS
Share on FacebookShare on Twitter

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.

RelatedPosts

How To Prevent or Disable Copy and Paste in an Input Field

How To Get the Size of the Screen, Current Web Page and Browser Window

How To Copy Text to Clipboard [CODE]

<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

    });

});

 

Tags: slickSlider
Share238Tweet149Share60

Related Posts

How To Prevent or Disable Copy and Paste in an Input Field
Javascript

How To Prevent or Disable Copy and Paste in an Input Field

by 22bulbjungle
December 21, 2022
0

On the following html code, you will see there are 2 input fields. One with a type of email and the other...

Read more

How To Get the Size of the Screen, Current Web Page and Browser Window

December 11, 2022
How To Copy Text to Clipboard

How To Copy Text to Clipboard [CODE]

September 6, 2022
Slick Image with Text Slider

How To Create Custom Image Text Slider Using Slick (Step-by-step)

April 27, 2021
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.