carousel

index.html

<style>
  .slider {
  border-radius: 0.5rem;
  margin: 1rem;
  min-height: 15rem;
  background: linear-gradient(
    to right,
    #314755,
    #26a0da
  ); /* Default Background */
  box-shadow: 8px 7px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  overflow-x: scroll; /* We should able scroll on x coordinates */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* For mobile */
  -ms-overflow-style: none; /* For hide scrollbar */
  scrollbar-width: none; /* For hide scrollbar */
}

.slider .slide-item {
  cursor: grabbing;
  scroll-snap-align: start;
  flex-shrink: 0; /* We don't want to fit divs to parent element. So we'll use flex-shrink: 0 */
  background-color: red;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 5rem;
}

.slide-item:nth-of-type(1) {
  background: linear-gradient(
    to right,
    #000000,
    #e74c3c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(2) {
  background: linear-gradient(
    to right,
    #485563,
    #29323c
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slide-item:nth-of-type(3) {
  background: linear-gradient(
    to right,
    #556270,
    #ff6b6b
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

</style>

<a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <div class="slider" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">
        <div draggable="true" class="slide-item" id="slide1">
            😥
        </div>
        <div draggable="true" class="slide-item" id="slide2">
            🤔
        </div>
        <div draggable="true" class="slide-item" id="slide3">
            🥺
        </div>
    </div>
    <div class="links"></div>

    <script>
        const slider = document.querySelector('.slider')
        const sliderTotal = document.querySelectorAll('.slide-item').length

        document.querySelectorAll('.slide-item').forEach((item, index) => {
            const a = document.createElement('a')
            a.href = '#' + item.id
            a.textContent = index
            document.querySelector('.links').appendChild(a)
        })


        let slideIndex = 1

        setInterval(() => {
            slideIndex++
            if (slideIndex > sliderTotal) {
                slideIndex = 1
            }
            window.location.href = `#slide${slideIndex}`
        }, 5000)


        function dragover_handler(ev) {
            ev.preventDefault();
        }
        function drop_handler(ev) {
            ev.preventDefault();
        }



        slider.addEventListener('dragstart', e => {
            const sliderWidth = e.target.clientWidth / 2
            const clickPosition = e.clientX
            e.dataTransfer.setDragImage(new Image(), 0, 0)
            console.log(sliderWidth);
            console.log(clickPosition);
            if (clickPosition > sliderWidth) {
                slideIndex++
                if (slideIndex > sliderTotal) {
                    slideIndex = 1
                }
            } else {
                if (slideIndex == 0) {
                    slideIndex = sliderTotal
                } else {
                    slideIndex--
                }
            }
            console.log(slideIndex);
            window.location.href = `#slide${slideIndex}`
        })
    </script>