usecueweb development

Slider/Carousel by Usecue

Close
  • readme.txt
  • index.html
  • carousel.css
  • carousel.js

What is this?

This is a carousel that is powered by modern web technology. It uses snap scrolling, an unordened list with horizontal overflow set to auto and hidden scrollbars. The bullets are actually anchor links, which trigger a scroll-behaviour: smooth scroll. It is silky smooth, blazing fast and has graceful degredation. And the best thing: it is only 3kb large.

How to use it?

Below you can find a simplified version of the required HTML.

<div id="carousel0" class="carousel" duration="7000">
    <ul>
        <li id="c0_slide1">
            <img src="image1.jpg" alt="image1">
            <div>
                <div>1</div>
            </div>
        </li>
        ...
    </ul>
    <ol>
        <li>
            <a href="#c0_slide1"></a>
        </li>
        ...
    </ol>
    <button class="prev">‹</button>
    <button class="next">›</button>
</div>
<link rel="stylesheet" href="carousel.css" />
<script src="carousel.js"></script>

Features

You can swipe the carousel with your mouse or your finger on touch screens through native touch scroll. You can also use the arrow keys on your keyboard to scroll the carousel. The carousel automatically advances to the next slide after the duration set in the main div (in millisecond). If you interact with it, the autoplay stops.

Credits

The approach is (partly) based on the 2019 scroll snap carousel from Nolan Lawson. The debounce function is written by Chris Ferdinandi.

License

This code is licensed WTFPL.

<div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 45rem; margin-inline: auto;">
<div id="carousel0" class="carousel" duration="7000">
    <ul>
        <li id="c0_slide1">
            <img src="image1.jpg" alt="image1">
            <div><div>1</div></div>
        </li>
        <li id="c0_slide2">
            <img src="image2.jpg" alt="image2">
            <div><div>2</div></div>
        </li>
        <li id="c0_slide3">
            <img src="image3.jpg" alt="image3">
            <div><div>3</div></div>
        </li>
        <li id="c0_slide4">
            <img src="image4.jpg" alt="image4">
            <div><div>4</div></div>
        </li>
    </ul>
    <ol>
        <li>
            <a href="#c0_slide1"></a>
        </li>
        <li>
            <a href="#c0_slide2"></a>
        </li>
        <li>
            <a href="#c0_slide3"></a>
        </li>
        <li>
            <a href="#c0_slide4"></a>
        </li>
    </ol>
    <button class="prev">‹</button>
    <button class="next">›</button>
</div>
</div>

<link rel="stylesheet" href="/demos/carousel/carousel.css" />
<script src="/demos/carousel/carousel.js"></script>
.carousel {
    position: relative;
    width: 100%;
}

.carousel ul {
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    scroll-snap-points-y: repeat(100%);
    scroll-behavior: smooth;
    background: gray;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    cursor: grab;
    user-select: none;
}

.carousel ul.grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
}

.carousel ul::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.carousel ul li {
    position: relative;
    min-width: 100%;
    list-style: none;
    background: url() center center / cover no-repeat;
    scroll-snap-align: start;
    pointer-events: none;
    padding-bottom: 55%;
}

.carousel ul li > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.carousel ul li > img {
    object-fit: cover;
}

.carousel ul li > div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.carousel ol {
    position: absolute;
    bottom: 15px;
    display: flex;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    margin: 0;
    padding: 0;
}

.carousel ol li {
    list-style: none;
    padding: 0 5px;
}

.carousel ol li a {
    display: block;
    height: 10px;
    width: 10px;
    border: 2px solid white;
    background: transparent;
    border-radius: 100%;
}

.carousel ol li.selected a {
    background: white;
}

.carousel .prev,
.carousel .next {
    display: none;
    user-select: none;
    cursor: pointer;
    font-size: 50px;
    color: white;
    position: absolute;
    left: 0;
    padding: 15px 15px 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    line-height: 0;
    font-family: sans-serif;
    background: none;
    border-radius: 0;
    border: 0;
}

.carousel .next {
    left: auto;
    right: 0;
}
document.addEventListener('DOMContentLoaded', function() {
    
  const carousels = document.querySelectorAll('.carousel');
  carousels.forEach(function( carousel ) {

      const ele = carousel.querySelector('ul');
      const amountvisible = Math.round(ele.offsetWidth/ele.querySelector('li:nth-child(1)').offsetWidth);
      const bullets = carousel.querySelectorAll('ol li');
      const slides = carousel.querySelectorAll('ul li');
      const nextarrow = carousel.querySelector('.next');
      const prevarrow = carousel.querySelector('.prev');
      let isDown = false;
      let startX;
      let scrollLeft;

      // Initialize the carousel
      nextarrow.style.display = 'block';
      prevarrow.style.display = 'block';
      ele.scrollLeft = 0;
      bullets[0].classList.add('selected');
      slides[0].classList.add('selected');
      if(amountvisible>1) {
        var removeels = carousel.querySelectorAll('ol li:nth-last-child(-n + '+(amountvisible-1)+')');
        removeels.forEach(function(removeel) {
          removeel.remove();
        });
      }

      const setSelected = function() {
          bullets.forEach(function(bullet) {
             bullet.classList.remove('selected');
          });
          slides.forEach(function(slide) {
             slide.classList.remove('selected');
          });
          const scrolllength = carousel.querySelector('ul li:nth-child(2)').offsetLeft - carousel.querySelector('ul li:nth-child(1)').offsetLeft;
          const nthchild = (Math.round((ele.scrollLeft/scrolllength)+1));
          carousel.querySelector('ol li:nth-child('+nthchild+')').classList.add('selected'); 
          carousel.querySelector('ul li:nth-child('+nthchild+')').classList.add('selected'); 
          if(carousel.parentElement.parentElement.querySelector('.dynamictitle')) {
              const title = carousel.querySelector('ul li:nth-child('+nthchild+') img').getAttribute('title'); 
              if(title) carousel.parentElement.parentElement.querySelector('.dynamictitle').innerHTML = title;
          }
      }

      const scrollTo = function(event) {
          event.preventDefault();
          ele.scrollLeft = ele.querySelector(this.getAttribute('href')).offsetLeft;
      }
      
      const nextSlide = function() {
          if(!carousel.querySelector('ol li:last-child').classList.contains('selected')) {
              carousel.querySelector('ol li.selected').nextElementSibling.querySelector('a').click();
          } else {
              carousel.querySelector('ol li:first-child a').click();
          }
      }

      const prevSlide = function() {
          if(!carousel.querySelector('ol li:first-child').classList.contains('selected')) {
              carousel.querySelector('ol li.selected').previousElementSibling.querySelector('a').click();
          } else {
              carousel.querySelector('ol li:last-child a').click();
          }
      }
      
      const setInteracted = function() {
        ele.classList.add('interacted');
      }
          
      // Attach the handlers
      ele.addEventListener("scroll", debounce(setSelected));
      ele.addEventListener("touchstart", setInteracted);
      ele.addEventListener('keydown', function (e){
          if(e.key == 'ArrowLeft') ele.classList.add('interacted');
          if(e.key == 'ArrowRight') ele.classList.add('interacted');
      });
      ele.addEventListener('mousedown', (e) => {
          isDown = true;
          ele.classList.add('grabbing');
          ele.focus();
          startX = e.pageX - ele.offsetLeft;
          scrollLeft = ele.scrollLeft;
          ele.classList.add('interacted');
      });
      ele.addEventListener('mouseleave', () => {
          isDown = false;
          ele.classList.remove('grabbing');
          ele.scrollLeft = ele.scrollLeft - 1; //trigger scroll event to update selected bullet
          ele.scrollLeft = ele.scrollLeft + 1; //trigger scroll event to update selected bullet
      });
      ele.addEventListener('mouseup', () => {
          isDown = false;
          ele.classList.remove('grabbing');
          ele.scrollLeft = ele.scrollLeft - 1; //trigger scroll event to update selected bullet
          ele.scrollLeft = ele.scrollLeft + 1; //trigger scroll event to update selected bullet
      });
      ele.addEventListener('mousemove', (e) => {
          if(!isDown) return;
          e.preventDefault();
          const x = e.pageX - ele.offsetLeft;
          const walk = (x - startX) * 3; //scroll-fast
          ele.scrollLeft = scrollLeft - walk;
      });

      nextarrow.addEventListener("click", nextSlide);
      nextarrow.addEventListener("mousedown", setInteracted);
      nextarrow.addEventListener("touchstart", setInteracted);

      prevarrow.addEventListener("click", prevSlide);
      prevarrow.addEventListener("mousedown", setInteracted);
      prevarrow.addEventListener("touchstart", setInteracted);

      bullets.forEach(function(bullet) {
        bullet.querySelector('a').addEventListener('click', scrollTo);
        bullet.addEventListener("mousedown", setInteracted);
        bullet.addEventListener("touchstart", setInteracted);
      });

      //setInterval for autoplay
      if(carousel.getAttribute('duration')) {
        setInterval(function(){ 
          if (ele != document.querySelector(".auto-carousel:hover ul") && ele.classList.contains('interacted')==false) {
            nextarrow.click();
          }
        }, carousel.getAttribute('duration'));
      }
    
    
  }); //end foreach

}); //end onload


/**
* Debounce functions for better performance
* (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
* @param  {Function} fn The function to debounce
*/
function debounce (fn) {
// Setup a timer
let timeout;
// Return a function to run debounced
return function () {
  // Setup the arguments
  let context = this;
  let args = arguments;
  // If there's a timer, cancel it
  if (timeout) {
    window.cancelAnimationFrame(timeout);
  }
  // Setup the new requestAnimationFrame()
  timeout = window.requestAnimationFrame(function () {
    fn.apply(context, args);
  });
};
}