Carousel – Design Portal

A website carousel or slider, is an effective way of displaying multiple images or content in a single space.

Demo

Despite Sketchy Record, China Will Preside Over Upcoming U.N. Biodiversity Conference

<div class="carousel-top">
  <a class="carousel-cell mx-2 items-stretch flex flex-col text-white group transition-none bg-gray" href="https://science.howstuffworks.com/environmental/conservation/issues/china-biodiversity-conference-news.htm" style="width: 300px; min-height: 240px; position: absolute; left: 0%;" title="">
    <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2Jpb2RpdmVyc2l0eS5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjU1MH19fQ==" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2Jpb2RpdmVyc2l0eS5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjU1MH19fQ==" alt="Despite Sketchy Record, China Will Preside Over Upcoming U.N. Biodiversity Conference" class="lazyload block object-cover w-100 group-hover:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    <h3 class="flex-grow text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-2">Despite Sketchy Record, China Will Preside Over Upcoming U.N. Biodiversity Conference</span></h3>
  </a>
  <a class="carousel-cell mx-2 items-stretch flex flex-col text-white group transition-none bg-gray" href="https://science.howstuffworks.com/environmental/conservation/issues/nord-stream-methane-leak.htm" style="width: 300px; min-height: 240px; position: absolute; left: 25.73%;" title="" aria-hidden="true">	
    <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL25vcmQtc3RyZWFtLWxlYWsuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL25vcmQtc3RyZWFtLWxlYWsuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" alt="Nord Stream Methane Leak Could Be Biggest Ever Into Atmosphere" class="lazyload block object-cover w-100 group-hover:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    <h3 class="flex-grow text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-2">Nord Stream Methane Leak Could Be Biggest Ever Into Atmosphere</span></h3>
  </a>
  <a class="carousel-cell mx-2 items-stretch flex flex-col text-white group transition-none bg-gray" href="https://science.howstuffworks.com/environmental/conservation/issues/clean-air-act-challenge-news.htm" style="width: 300px; min-height: 240px; position: absolute; left: 51.47%;" title="" aria-hidden="true">
    <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NsZWFuLWFpci1hY3QxLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NsZWFuLWFpci1hY3QxLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" alt="The Clean Air Act Is Being Challenged. Will SCOTUS Protect It?" class="lazyload block object-cover w-100 group-hover:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    <h3 class="flex-grow text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-2">The Clean Air Act Is Being Challenged. Will SCOTUS Protect It?</span></h3>
  </a>
  <a class="carousel-cell mx-2 items-stretch flex flex-col text-white group transition-none bg-gray" href="https://science.howstuffworks.com/environmental/earth/oceanography/how-deep-is-ocean.htm" style="width: 300px; min-height: 240px; position: absolute; left: 77.2%;" title="" aria-hidden="true">
    <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2RlZXAtb2NlYW4tMS5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjU1MH19fQ==" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2RlZXAtb2NlYW4tMS5qcGciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjU1MH19fQ==" alt="How Deep Is the Ocean?" class="lazyload block object-cover w-100 group-hover:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    <h3 class="flex-grow text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-2">How Deep Is the Ocean?</span></h3>
  </a>
  <a class="carousel-cell mx-2 items-stretch flex flex-col text-white group transition-none bg-gray" href="https://science.howstuffworks.com/environmental/earth/geophysics/leap-second.htm" style="width: 300px; min-height: 240px; position: absolute; left: 102.93%;" title="" aria-hidden="true">	
    <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2xlYXAtc2Vjb25kLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2xlYXAtc2Vjb25kLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" alt="Time Is Up for the Leap Second" class="lazyload block object-cover w-100 group-hover:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    <h3 class="flex-grow text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-2">Time Is Up for the Leap Second</span></h3>
  </a>
</div>

/* This carousel is made using Flickity CSS: https://flickity.metafizzy.co, and Tailwinds utility classes.*/

<script src="//cdn-assets.hswstatic.com/lite/2826/js/vendor/flickity.min.js"></script>
<script>
  let carouselOpts = {
    arrowShape: 'M36.2,18.6c-1.8-1.7-4.5-1.6-6.2,0.1L2.1,47.1c-0.8,0.8-1.3,1.9-1.3,3.1c0,0.6,0.1,1.2,0.3,1.7c0.2,0.5,0.5,1,0.9,1.4l0,0l28.1,28.3c1.7,1.7,4.5,1.7,6.2,0c1.7-1.8,1.7-4.5,0-6.3L15.6,54.5h78.8c2.3-0.1,4.2-2,4.3-4.3c0.1-2.5-1.9-4.5-4.3-4.6H15.5l20.7-20.7C37.9,23.1,37.9,20.3,36.2,18.6L36.2,18.6z',
    cellAlign: 'left',
    contain: true,
    wrapAround: true,
    pageDots: false
  };
  var flktyTop = new Flickity('.carousel-top', carouselOpts);
</script>

Note

The carousel is using flickity.js, please view their documentation for setup and configuration options.

States and Variations

Mobile Feature Slider

Hidden on desktop. Resize viewport, or view on a mobile device.

Special Offer on Antivirus Software From HowStuffWorks and TotalAV Security

Try Our Crossword Puzzles!

Can You Solve This Riddle?

<div class="flex overflow-x-scroll md:hidden mb-8 promoted-recirc">
  <a class="mobile-promoted-item flex flex-col text-white min-w-3/4 md:min-w-1/3 mr-4 group transition-none bg-gray" href="https://computer.howstuffworks.com/how-to-protect-privacy-online.htm?utm_source=howstuffworks&utm_medium=promoted-recirc" data-block="0">
    <picture class="lazyload loaded">
      <img decoding="async" src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3ByaXZhY3ktb25saW5lLXRvdGFsQVYuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoiNDAwIn19fQ==" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3ByaXZhY3ktb25saW5lLXRvdGFsQVYuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoiNDAwIn19fQ==" alt="Special Offer on Antivirus Software From HowStuffWorks and TotalAV Security" width="1600" height="900" class="block object-cover w-100 group-hover:opacity-75 mx-auto" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    </picture>
    <div class="flex-1 overflow-hidden text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 pb-4 group-hover:text-white md:leading-tight">
      <span class="line-clamp-3">Special Offer on Antivirus Software From HowStuffWorks and TotalAV Security</span>
    </div>
  </a>
  <a class="mobile-promoted-item flex flex-col text-white min-w-3/4 md:min-w-1/3 mr-4 group transition-none bg-gray" href="https://entertainment.howstuffworks.com/leisure/online-games/crossword-puzzles.htm?utm_source=howstuffworks&utm_medium=promoted-recirc" data-block="1">
    <picture class="lazyload loaded">
      <img decoding="async" src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL0Nyb3Nzd29yZC1IRVJPLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6IjQwMCJ9fX0=" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL0Nyb3Nzd29yZC1IRVJPLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6IjQwMCJ9fX0=" alt="Try Our Crossword Puzzles!" width="1920" height="1080" class="block object-cover w-100 group-hover:opacity-75 mx-auto" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    </picture>
    <div class="flex-1 overflow-hidden text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 pb-4 group-hover:text-white md:leading-tight">
      <span class="line-clamp-3">Try Our Crossword Puzzles!</span>
    </div>
  </a>
  <a class="mobile-promoted-item flex flex-col text-white min-w-3/4 md:min-w-1/3 mr-4 group transition-none bg-gray" href="https://entertainment.howstuffworks.com/leisure/online-games/riddle-game-71?utm_source=howstuffworks&utm_medium=promoted-recirc" data-block="2">
    <picture class="lazyload">
      <img decoding="async" src="" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3JpZGRsZS1nYW1lLTcxLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6IjQwMCJ9fX0=" alt="Can You Solve This Riddle?" width="1920" height="1080" class="block object-cover w-100 group-hover:opacity-75 mx-auto" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;">
    </picture>
    <div class="flex-1 overflow-hidden text-lg font-bold font-headline bg-royal-blue mb-0 py-2 px-3 pb-4 group-hover:text-white md:leading-tight">
      <span class="line-clamp-3">Can You Solve This Riddle?</span>
    </div>
  </a>
</div>

Anatomy

Carousel
Carousel Item
Carousel Thumbnail
Carousel Post Title
Carousel Previous Button
Carousel Next Button