Jekyll (for GitHub Pages): How to create a carousel of Divs?

I'm trying to create a carousel of <div> elements on my Jekyll site (which runs on GitHub Pages). So far, all examples I found discuss a carousel of images. Is there a way to create one for <div>s too?

Solution

I actually create this carousel with react and (HTML, CSS, and JS).

these are links for the react version:

CodeSandBox

Replit

GitHub

For HTML, CSS, and JS version:

const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;

let modalPage = 0;



const nextPage = () => {
  modalPage++;
  modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};

const previousPage = () => {
  modalPage--;
  modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};

/* you set root to define varibales */
:root { 
  --modal-width: 300px;
  --modal-height: 400px;
  --number-of-pages: 5;
}


html body{
  margin: 0px;
}

.modal-background{
  background-color: rgba(0,0,0,0.4);
  position: absolute; 
  top: 0;
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 0;
}


.modal-boundary{
  width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
  height: var(--modal-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  z-index: 10;
  /* the max width must be as same as the width of modal ModalBoundary*/
  @media screen and (max-width: var(--modal-width)) {
    width: 100vw;
    height: 100vh;
}
}

/*  This container contains every slide you gonna use in your modal   */
.modal-slides-container{
  min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
  height: var(--modal-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: white !important;
  /*here is how to control carousel movement*/
  margin: 0px; /*this how we control the place of the modal*/
  transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
  }

  
.modal-slide{
  width: var(--modal-width);
  height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white !important;
 }

.button-container{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.navigation-button{
  margin: auto;
}

<body>
  <div class="modal-background">
    <div class="modal-boundary">
      <div class="modal-slides-container">
        <div class="modal-slide">
          <h2> first page </h2>
          <div class="button-container">
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <h2> second page </h2>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <h2> third page </h2>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <h2> fourth page </h2>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <h2> fifth page </h2>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

And if you want to know how wrote it :

Youtube