Creating a Vertical Slider with Content Navigation and Progress Bar Using Slick

Prerequisites

• Include jQuery and Slick assets in your document.

Simplified Markup

• Use a div with a class of row.
• Inside this row, create two columns:
  • Image Column:
    • New div with a class of img holder for image slides.
  • Text Column:
    • div with a class of content item for text slides.
• Duplicate slides to create new ones.

Modifying Content

• Update image sources.
• Update text content.

CSS Styling

• Add flex CSS to the row container.
• Set image maximum width to 100% of the container.
• Width distribution:
  • First column: 60%
  • Text column: 40%
• Add padding to slide elements for box shadow effects.
• Set span elements to block and apply a shadow.

Progress Bar

• The span bar element will serve as the progress bar:
  • Set display: block, height, and a 100% width.
  • Add a light color background.
  • Apply position: absolute to position it at the top left.
• Style the pseudo-element after for the progress bar:
  • Set a vibrant background for animation.
• Create a new keyframe called progress to animate width from 0 to 100%.
• Apply the keyframe animation to the pseudo-element with a duration of 5 seconds.

Activating Slick Slider

• Add slick() to the image container:
  • Set a width property due to the slick function overriding styles.
• Configure Slick options:
  • slidesToScroll: 1
  • fade: true
  • Hide arrows
  • autoplay: true
  • autoplaySpeed: 5000 milliseconds (matching progress bar animation speed).
• Set text content as navigation using isNav4 with the parent element value.
• Add slick function and configuration to the text container:
  • Hide arrows
  • Set vertical: true
  • slidesToShow: 3
  • focusOnSelect: true
  • Add sNav4 with the value of the image container group.

Active Slide Styling

• Style elements inside the currently active slide:
  • Add padding and set maximum height.
  • Reset height for the current slide.
• Set infinite: false
• Hide the progress bar if not on the current slide and show it when it is active.
• Add border styling and override slick list style height to auto.