Slick Carousel
Card image cap
Card Title 1 (Image has a link)

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 4

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 5

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 6

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 7

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 8

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Card image cap
Card Title 9

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam sapiente quibusdam labore adipisci.

Some info on this demo.

The original carousel version of the Slick slider uses two sliders to implement the carousel. This version uses a single slider which is cloned and massaged to display it as a thumbnail track under the original slider.

There are benefits and disadvantages to this...

  1. Pro:You only need one slider in the markup and one initialization call!
  2. Con:We have to process the markup via javascript which then calls init again in order to display the second slider.
  3. Pro:The sliders are related but do not force navigation on each - meaning if you slide the thumbnail slide, the top slide doesn't auto-advance.