in this video 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 here is a simplified markup we have a dev with a class of row inside this row are the image and the text column for the image column there is a new dev with a class of img holder this will be our image slide for the text column the slide is the dev 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 add flex css to the row container element ensure the images are at a maximum of 100 of the container the first column will be sixty percent width and forty percent 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 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 0 to a width of 100 percent now on the pseudo element add the keyframe and then the duration in this case it will be five seconds we're almost done adding the css now let's activate the slick slider function for these elements 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 one fade to true hide the arrows auto play is true auto play speed let's match the one we set for the bar animation which is 5 seconds so here add 5 000 milliseconds to set our text content as navigation add is nav4 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 three the focus on select is true then add the snav4 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 to the elements inside the currently active slide for the current item container add padding let's add a maximum height and reset it when it's the current slide [Music] [Music] 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 and finally override the slick list style height to auto [Music] [Music] [Music] you