JavaScript Autoplay Carousel with Play Pause Controls

JavaScript Autoplay Carousel with Play Pause Controls
Code Snippet:Autoplay carousel without JavaScript timers - CSS animations
Author: Stanko
Published: March 4, 2024
Last Updated: March 4, 2024
Downloads: 1,039
License: MIT
Edit Code online: View on CodePen
Read More

The JavaScript code snippet helps you to create an Autoplay Carousel with play pause controls and provides a carousel for slideshows. It enables automatic slide progression and manual control using play and pause buttons. This functionality helps display content sequentially, allowing users to navigate through slides at their own pace.

Moreover, the controls offer play, pause, next, and previous actions for interactive browsing through the content.

How to Create Javascript Autoplay Carousel With Play Pause Controls

1. First of all, create the HTML structure as follows. Make sure you have the necessary structure in your HTML, including elements with the classes “content,” “pagination,” “state,” and “controls”.

<div class="content">

  <div class="pagination">
  </div>

  <div class="state">
    &nbsp;
  </div>

  <div class="controls">
    <button class="control control--prev" aria-label="Previous">
      <svg class="icon" viewBox="0 0 32 32">
        <path d="M20 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 21 5v6.11a1 1 0 0 1-.479.854L13.918 16l6.603 4.035c.297.182.479.506.479.854V27a1 1 0 0 1-1 1zM3.918 16 19 25.217V21.45l-7.521-4.596a1 1 0 0 1 0-1.707L19 10.55V6.783L3.918 16z" />
        <path d="M30 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 31 5v22a1 1 0 0 1-1 1zM13.918 16 29 25.217V6.783L13.918 16z" />
      </svg>
    </button>
    <button class="control control--play-pause" aria-label="Play/Pause">
      <svg class="icon icon--play" viewBox="0 0 32 32">
        <path d="M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z" />
      </svg>
      <svg class="icon icon--pause" viewBox="0 0 32 32">
        <path d="M13 28H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6H8v20zM25 28h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6h-4v20z" />
      </svg>
    </button>
    <button class="control control--next" aria-label="Next">
      <svg class="icon" viewBox="0 0 32 32">
        <path d="M12 28a1 1 0 0 1-1-1v-6.111c0-.348.182-.672.479-.854L18.082 16l-6.603-4.035A1.001 1.001 0 0 1 11 11.11V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 12 28zm1-6.55v3.767L28.082 16 13 6.783v3.767l7.521 4.596a1.001 1.001 0 0 1 0 1.708L13 21.45z" />
        <path d="M2 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 2 28zM3 6.783v18.434L18.082 16 3 6.783z" />
      </svg>
    </button>
  </div>

  <a target="_blank" href="https://muffinman.io/blog/css-animations-instead-of-js-timers/">Blog post</a>
</div>

Replace the demo content in the HTML with your own slides. Each slide corresponds to a button in the pagination section.

2. Style the carousel using the following CSS styles. You can modify the CSS to match your project’s design. You can change the colors, sizes, and styles to fit your aesthetic preferences.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #98ede0;
  transition: background 500ms;
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
}

.content {
  margin: 0 auto;
  max-width: 500px;
  height: 100vh;
  height: 100svh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 80px;
  justify-content: center;
}

a {
  transition: color 200ms;
  color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-decoration: none;
  margin: 40px auto 0;
}
a:hover {
  color: black;
  text-decoration: underline;
}
a:focus-visible {
  color: black;
  outline: 3px solid rgba(255, 255, 255, 0.3);
  outline-offset: 5px;
}

.pagination {
  display: flex;
  gap: 10px;
  height: 4px;
  min-height: 4px;
}

.pagination-item {
  border-radius: 100px;
  height: 100%;
  flex: auto;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 0;
  cursor: pointer;
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.pagination-progress {
  flex: auto;
  background: #333;
  height: 100%;
  width: 0;
}
.pagination-item--running .pagination-progress {
  animation: progress 3s linear forwards;
}
.pagination-item--done .pagination-progress {
  width: 100%;
}
.pagination--paused .pagination-progress {
  animation-play-state: paused;
}
:-moz-window-inactive .pagination-progress {
  animation-play-state: paused;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.control {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: none;
  outline: none;
  height: 40px;
  flex: 40px 0 0;
  max-width: 100px;
  background: rgba(255, 255, 255, 0.3);
  transition: transform 200ms, background-color 200ms;
  will-change: transform, background-color;
  font-size: 20px;
}
.control:hover {
  cursor: pointer;
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.45);
}
.control:focus {
  background: rgba(255, 255, 255, 0.6);
}

.icon {
  width: 20px;
}

.icon--play {
  margin-right: -2px;
}

.pagination--paused ~ .controls .icon--pause,
.pagination:not(.pagination--paused) ~ .controls .icon--play {
  display: none;
}

.state {
  font-size: 120px;
  text-align: center;
}

3. Finally, add the following JavaScript code to your project to enable carousel functionality. Customize the colors array to match the background colors of your slides.

"use strict";
function getItem(index) {
    const item = document.createElement('button');
    item.classList.add('pagination-item');
    item.addEventListener('animationend', next);
    item.addEventListener('click', () => update(index));
    const progress = document.createElement('div');
    progress.classList.add('pagination-progress');
    item.appendChild(progress);
    return item;
}
function createItems(itemsCount) {
    const items = [];
    for (let i = 0; i < itemsCount; i++) {
        items.push(getItem(i));
    }
    return items;
}
function jumpTo(item) {
    if (isPaused) {
        item.classList.remove(classNames.RUNNING);
        item.classList.add(classNames.DONE);
    }
    else {
        item.classList.add(classNames.RUNNING);
        item.classList.remove(classNames.DONE);
    }
    let sibling = item;
    while ((sibling = sibling.previousSibling)) {
        sibling.classList.remove(classNames.RUNNING);
        sibling.classList.add(classNames.DONE);
    }
    sibling = item;
    while ((sibling = sibling.nextSibling)) {
        sibling.classList.remove(classNames.RUNNING, classNames.DONE);
    }
}
function update(index) {
    activeIndex = index;
    jumpTo(items[activeIndex]);
    // Update slide and background color
    $state.innerHTML = activeIndex + 1;
   // document.body.style.backgroundColor = colors[activeIndex];

    document.querySelector(".cd__main").style.backgroundColor = colors[activeIndex];
}
function prev() {
    if (activeIndex > 0) {
        update(activeIndex - 1);
    }
    // else {
    //   // Loop to the last slide
    //   update(ITEMS_COUNT - 1);
    // }
}
function next() {
    if (activeIndex < ITEMS_COUNT - 1) {
        update(activeIndex + 1);
    }
    // else {
    //   // Loop to the first slide
    //   update(0);
    // }
}
function playPause() {
    $pagination.classList.toggle(classNames.PAUSED);
    isPaused = !isPaused;
    // When unpausing,
    // if the current slide is done, jump to the next one
    if (!isPaused && items[activeIndex].classList.contains(classNames.DONE)) {
        next();
    }
}
const colors = ['#98ede0', '#74b9ff', '#a29bfe', '#fd79a8', '#ffeaa7'];
const classNames = {
    RUNNING: 'pagination-item--running',
    DONE: 'pagination-item--done',
    PAUSED: 'pagination--paused',
};
let activeIndex = 0;
let isPaused = false;
const ITEMS_COUNT = 5;
const items = createItems(ITEMS_COUNT);
const $pagination = document.querySelector('.pagination');
const $state = document.querySelector('.state');
const $prev = document.querySelector('.control--prev');
const $next = document.querySelector('.control--next');
const $playPause = document.querySelector('.control--play-pause');
$pagination.replaceChildren(...items);
$prev.addEventListener('click', prev);
$next.addEventListener('click', next);
$playPause.addEventListener('click', playPause);
update(activeIndex);

That’s all! hopefully, you have successfully created an autoplay carousel with play pause controls. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X