Simplify script

Horizontally Items Scrolling Free Carousel

We will create a horizontal carousel with free scrolling on mobile and desktop, the Carousel which scrolls free when user pan on mobile and desktop, it is same as touch carousel which act similer in mobile and desktop , no jquery required it is a simple plugin , so let start creating that Paging and free-scroll mode carousel which is responsive with all the device and screens, we will create a container in which we have multiple item or you can say cards which scrolls in x-axis also it will hide the old scroll bar in windows it is a best free scrolling horizontal carousel with pure css and javascript.

Creating a Horizontal Scroll carousel with free scrolling ,horizontal carousel

Lets create a markup for the slider which contains carousel items or the carousel cards which we want to scroll horizontaly please check the below HTML markup

The functionality will work similier to the javascript slick slider carousel, when a user pan on the slider section and mve moouse and laptop trackpad the the image will scrol freely, there is no horizontal old scrollbar, free image horizontal carousel there is no jquery dependency on this image or cards carousel, pure javascript image or card carousel , horizontal carousel modules, horizontal scrolling carousel

Working Demo

Download Working File

HTML Markup

<div class="container">
  <div class="ss-carousel">
    <div class="ss-carousel__wrapper">
      <div class="ss-carousel__header">
        <h2 class="ss-carousel__headline">Working Demo</h2>
        <div class="ss-carousel__controls">
          <button class="ss-carousel__arrow disabled arrow-prev"></button>
          <button class="ss-carousel__arrow arrow-next"></button>
        </div>
      </div>
      <ul class="ss-carousel__content">
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-9.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-3.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-8.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-7.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-6.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-5.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-4.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
        <li class="ss-carousel__item">
          <a href="#">
            <img
              class="ss-carousel__item__image"
              src="https://simplifyscript.com/wp-content/uploads/2024/07/photo-2.jpg"
              alt=""
            />
            <div class="ss-carousel__description">
              <h3 class="ss-carousel__title">Lorem ipsum dolor sit amet</h3>
              <span class="ss-carousel__subtitle">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s
              </span>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

<style>
  .ss-carousel {
    padding: 24px 0px;
    background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
  }
  .ss-carousel h2 {
    margin: 0;
    color: #ffffff;
  }
  .ss-carousel a {
    text-decoration: none;
    color: #fff;
  }
  .ss-carousel img {
    aspect-ratio: 4/5;
    box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    object-fit: cover;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    margin-bottom: 16px;
  }
  .ss-carousel h3 {
    font-size: 24px;
    margin: 0;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 4px;
    line-height: 30px;
  }
  .ss-carousel span {
    color: #a7a7a7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
  }
  .ss-carousel .dragging a {
    pointer-events: none;
  }
  .ss-carousel .ss-carousel__wrapper {
    position: relative;
    margin-bottom: 24px;
  }
  @media only screen and (min-width: 1180px) {
    .ss-carousel .ss-carousel__wrapper.has-arrows .ss-carousel__content {
      justify-content: space-between;
    }
  }
  @media only screen and (min-width: 1180px) {
    .ss-carousel .ss-carousel__wrapper.has-arrows .ss-carousel__arrows {
      display: flex;
    }
  }
  .ss-carousel .ss-carousel__header {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0px 15px;
  }
  .ss-carousel .ss-carousel__content {
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: grid;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding: 0;
    margin: 0;
    grid-gap: 24px;
    grid-auto-flow: column;
    list-style: none;
  }
  .ss-carousel .ss-carousel__content::-webkit-scrollbar {
    display: none;
  }
  .ss-carousel .ss-carousel__item .ss-carousel__description {
    width: 100%;
  }
  .ss-carousel .ss-carousel__item a {
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    user-select: none;
    width: 350px;

    cursor: pointer;
  }
  .ss-carousel .ss-carousel__controls {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 24px;
  }
  .ss-carousel .ss-carousel__arrow {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
  }
  .ss-carousel .ss-carousel__arrow:before {
    content: '';
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=');
    background-size: contain;
    filter: brightness(5);
    display: block;
    width: 38px;
    height: 23px;
    cursor: pointer;
  }
  .ss-carousel .ss-carousel__arrow.arrow-prev:before {
    transform: rotate(90deg);
  }
  .ss-carousel .ss-carousel__arrow.arrow-next:before {
    transform: rotate(-90deg);
  }
  .ss-carousel .ss-carousel__arrow.disabled::before {
    filter: brightness(2);
  }

  .disclaimer a {
    color: #fff;
  }
</style>

Javascript

<script>
  window.addEventListener('load', () => {
    const COMPONENT_SELECTOR = '.ss-carousel__wrapper'
    const CONTROLS_SELECTOR = '.ss-carousel__controls'
    const CONTENT_SELECTOR = '.ss-carousel__content'

    const components = document.querySelectorAll(COMPONENT_SELECTOR)

    for (let i = 0; i < components.length; i++) {
      const component = components[i]
      const content = component.querySelector(CONTENT_SELECTOR)
      let x = 0
      let mx = 0
      const maxScrollWidth =
        content.scrollWidth - content.clientWidth / 2 - content.clientWidth / 2
      const nextButton = component.querySelector('.arrow-next')
      const prevButton = component.querySelector('.arrow-prev')

      if (maxScrollWidth !== 0) {
        component.classList.add('has-arrows')
      }

      if (nextButton) {
        nextButton.addEventListener('click', function (event) {
          event.preventDefault()
          x = content.clientWidth / 2 + content.scrollLeft + 0
          content.scroll({
            left: x,
            behavior: 'smooth',
          })
        })
      }

      if (prevButton) {
        prevButton.addEventListener('click', function (event) {
          event.preventDefault()
          x = content.clientWidth / 2 - content.scrollLeft + 0
          content.scroll({
            left: -x,
            behavior: 'smooth',
          })
        })
      }

      /**
       * Mouse move handler.
       *
       * @param {object} e event object.
       */
      const mousemoveHandler = (e) => {
        const mx2 = e.pageX - content.offsetLeft
        if (mx) {
          content.scrollLeft = content.sx + mx - mx2
        }
      }

      /**
       * Mouse down handler.
       *
       * @param {object} e event object.
       */
      const mousedownHandler = (e) => {
        content.sx = content.scrollLeft
        mx = e.pageX - content.offsetLeft
        content.classList.add('dragging')
      }

      /**
       * Scroll handler.
       */
      const scrollHandler = () => {
        toggleArrows()
      }

      /**
       * Toggle arrow handler.
       */
      const toggleArrows = () => {
        if (content.scrollLeft > maxScrollWidth - 10) {
          nextButton.classList.add('disabled')
        } else if (content.scrollLeft < 10) {
          prevButton.classList.add('disabled')
        } else {
          nextButton.classList.remove('disabled')
          prevButton.classList.remove('disabled')
        }
      }

      /**
       * Mouse up handler.
       */
      const mouseupHandler = () => {
        mx = 0
        content.classList.remove('dragging')
      }

      content.addEventListener('mousemove', mousemoveHandler)
      content.addEventListener('mousedown', mousedownHandler)
      if (component.querySelector(CONTROLS_SELECTOR) !== undefined) {
        content.addEventListener('scroll', scrollHandler)
      }
      content.addEventListener('mouseup', mouseupHandler)
      content.addEventListener('mouseleave', mouseupHandler)
    }
  })
</script>
Download Working File
views 167