JS - slider - trial

example: colorful slider

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

codes:
                <ul id="slidesA">
                    <li class="slideA showing">Slide 1</li>
                    <li class="slideA">Slide 2</li>
                    <li class="slideA">Slide 3</li>
                    <li class="slideA">Slide 4</li>
                    <li class="slideA">Slide 5</li>
                </ul>
                <style>
                    #slidesA{ position: relative; height: 20vw; padding: 0vw; margin: 2vw; list-style-type: none;}
                    .slideA{ position: absolute; left: 0vw; top: 0vw; width: 90%; height: 100%; opacity: 0; z-index: 1; 
                        -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s;
                    transition: opacity 1s;}
                    .showing{ opacity: 1; z-index: 2;}
                    .slideA{ font-size: 4vw; padding: 4vw; box-sizing: border-box; background: #333; color: #fff; }
                    .slideA:nth-of-type(1){background: red;}
                    .slideA:nth-of-type(2){ background: orange;}
                    .slideA:nth-of-type(3){ background: green;}
                    .slideA:nth-of-type(4){ background: blue;}
                    .slideA:nth-of-type(5){ background: purple;}
                </style>
                <script>
                    var slidesA = document.querySelectorAll('#slidesA .slideA');
                    var currentSlideA = 0;
                    var slideInterval = setInterval(nextSlideA,2000);
                    function nextSlideA(){
                        slidesA[currentSlideA].className = 'slideA';
                        currentSlideA = (currentSlideA+1)%slidesA.length;
                        slidesA[currentSlideA].className = 'slideA showing';
                    }
                </script>

example: image slider

1 / 3

holidays - 01

2 / 3

holidays - 02

3 / 3

holidays - 03

❮ ❯

code:
                <div>
                    <div class="slideshow-container">
                        <div class="mySlides fade">
                            <div class="numbertext">1 / 3</div>
                            <img src="3.jpg" style="width:100%">
                            <div class="text">holidays - 01</div>
                        </div>
                        <div class="mySlides fade">
                            <div class="numbertext">2 / 3</div>
                            <img src="1.jpg" style="width:100%">
                            <div class="text">holidays - 02</div>
                        </div>
                        <div class="mySlides fade">
                            <div class="numbertext">3 / 3</div>
                            <img src="2.jpg" style="width:100%">
                            <div class="text">holidays - 03</div>
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">❮</a>
                        <a class="next" onclick="plusSlides(1)">❯</a>
                    </div>
                    <br>
                    <div style="text-align:center">
                        <span class="dot" onclick="currentSlide(1)"></span>
                        <span class="dot" onclick="currentSlide(2)"></span>
                        <span class="dot" onclick="currentSlide(3)"></span>
                    </div>
                </div>
                <style>
                    .mySlides {display: none}
                    img {vertical-align: middle; width:60vw; height:35vw;}
                    .slideshow-container {max-width: 40vw; height: 35vw; position: relative; margin-left: 1vw;}
                    .prev,  .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 1.6vw; 
                        margin-top: -2.2vw; color: red;  font-weight: bold; font-size: 1.8vw; transition: 0.6s ease;
                        border-radius: 0 0.3vw 0.3vw 0; user-select: none; }
                    .next {right: 0; border-radius: 0.3vw 0 0 0.3vw;}
                    .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }
                    .text {color: skyblue; font-size: 1.5vw; padding: 0.8vw 1.2vw; position: absolute; bottom: 0.8vw;
                        width: 100%; text-align: center; }
                    .numbertext {color: dodgerblue;font-size: 1.2vw; padding: 0.8vw 1.2vw; position: absolute; top: 0;}
                    .dot {cursor: pointer; height: 1.5vw; width: 1.5vw; margin: 0 0.2vw; background-color: #999999; 
                        border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;
                    }
                    .active, .dot:hover { background-color: #111111;}
                    .fade { -webkit-animation-name: fade;  -webkit-animation-duration: 1.5s;  animation-name: fade; 
                        animation-duration: 1.5s; }
                    @-webkit-keyframes fade {
                    from { opacity: .4; }
                    to { opacity: 1;}
                    }
                    @keyframes fade {
                    from {opacity: .4;}
                    to {opacity: 1;}
                    }
            
                    @media only screen and (max-width: 300px) {
                    .prev, .next, .text { font-size: 0.8vw }
                    }
                </style>
                <script>
                    var slideIndex = 1;
                    showSlides(slideIndex);
                    // Next/previous controls
                    function plusSlides(n) {
                    showSlides(slideIndex += n);
                    }
                    // Thumbnail image controls
                    function currentSlide(n) {
                    showSlides(slideIndex = n);
                    }
                    function showSlides(n) {
                    var i;
                    var slides = document.getElementsByClassName("mySlides");
                    var dots = document.getElementsByClassName("dot");
                    if (n > slides.length) {slideIndex = 1}
                    if (n < 1) {slideIndex = slides.length}
                    for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none";
                    }
                    for (i = 0; i < dots.length; i++) {
                        dots[i].className = dots[i].className.replace(" active", "");
                    }
                    slides[slideIndex-1].style.display = "block";
                    dots[slideIndex-1].className += " active";
                    }
                </script>

example: multiple slideshows

slideshow 1:

❮ ❯

slideshow 2:

❮ ❯

code:
                <div>
                    <p>slideshow 1:</p>
                        <div class="slideshow-container">
                            <div class="mySlides1"><img src="../../pics/1.jpg" style="width:100%"></div>
                            <div class="mySlides1"><img src="../../pics/2.jpg" style="width:100%"></div>
                            <div class="mySlides1"><img src="../../pics/3.jpg" style="width:100%"></div>
                            <a class="prev1" onclick="plusSlides1(-1, 0)">❮</a>
                            <a class="next1" onclick="plusSlides1(1, 0)">❯</a>
                        </div>
            
                    <p>slideshow 2:</p>
                        <div class="slideshow-container">
                            <div class="mySlides2"><img src="../../pics/1.jpg" style="width:100%"></div>
                            <div class="mySlides2"><img src="../../pics/2.jpg" style="width:100%"></div>
                            <div class="mySlides2"><img src="../../pics/3.jpg" style="width:100%"></div>
                            <a class="prev2" onclick="plusSlides1(-1, 1)">❮</a>
                            <a class="next2" onclick="plusSlides1(1, 1)">❯</a>
                        </div>
                </div>
                <style>
                    .mySlides1, .mySlides2 {display: none}
                    img {vertical-align: middle;}
                    .slideshow-container {max-width: 40vw; position: relative; margin: auto;}
                    .prev1, .next1, .prev2, .next2 {cursor: pointer; position: absolute; top: 
                        50%; width: auto; padding: 1.6vw; margin-top: -2.2vw; color: burlywood; 
                        font-weight: bold;  font-size: 1.8vw; transition: 0.6s ease;
                    border-radius: 0 .3vw .3vw 0; user-select: none;}
                    .next1, .next2 { right: 0; border-radius: .3vw 0 0 .3vw;}
                    .prev1:hover, .next1:hover, .prev2:hover, .next2:hover{background-color: 
                        skyblue; color: red;}
                </style>
                <script>
                        let slideIndex1 = [1,1];
                        let slideId1 = ["mySlides1", "mySlides2"]
                        showSlides1(1, 0);
                        showSlides1(1, 1);
                        function plusSlides1(n, no) {
                            showSlides1(slideIndex1[no] += n, no);
                        }
                        function showSlides1(n, no) {
                        let j;
                            let xx = document.getElementsByClassName(slideId1[no]);
                            if (n > xx.length) {slideIndex1[no] = 1}    
                            if (n < 1) {slideIndex1[no] = xx.length}
                            for (j = 0; j < xx.length; j++) {
                                xx[j].style.display = "none";  
                            }
                            xx[slideIndex1[no]-1].style.display = "block";  
                        }
                </script>

example: another image slider

❮ ❯

1 2 3 4

code:
                <div>
                    <div class="slide-container">
                        <div class="clip fading"><img src='1.jpg' alt=''></div>
                        <div class="clip fading"><img src='2.jpg' alt=''></div>
                        <div class="clip fading"><img src='3.jpg' alt=''></div>
                        <div class="clip fading"><img src='4.jpg' alt=''></div>
                        <a href="#" class="prev3" title="Previous">❮</a>
                        <a href="#" class="next3" title="Next">❯</a>
                    </div>
                    <div class="dots-container">
                        <span class="pin">1</span>
                        <span class="pin">2</span>
                        <span class="pin">3</span>
                        <span class="pin">4</span>
                    </div>
                </div>
                <style>
                    @keyframes fade {
                        0% {opacity: 0;}
                        100% {opacity: 1;}
            
                    }
                    .slide-container {display: flex; justify-content: center; align-items: center;
                        max-width: 40vw; margin: auto; position: relative;}
                    .slide-container .clip {display: none; width: 100%; }
                    .slide-container .clip .fading {animation: fade 0.5s cubic-bezier(0.55, 
                        0.085, 0.68, 0.53) both;}
                    .slide-container .clip img {width: 100%; }
                    .slide-container .prev3, .slide-container .next3 {cursor: pointer; position:
                        absolute; top: 50%; width: auto; margin-top: -2.2vw; padding: 1.6vw; color: 
                        burlywood;font-weight: bold; font-size: 2vw; transition: all 0.6s ease; 
                        border-radius: 0 .3vw .3vw 0; user-select: none;}
                    .slide-container .prev3:hover, .slide-container .next3:hover { background-color: 
                        rgba(0, 0, 0, 0.8); color: white;}
                    .slide-container .prev3 {left: .2vw;}
                    .slide-container .next3 {right: .2vw;}
                    .dots-container {display: flex; justify-content: center; align-items: center; 
                        padding: 1vw;}
                    .dots-container .pin {display: flex; cursor: pointer; margin: .5vw; width: 2vw; 
                        height: 2vw; color: lightgreen; border-radius: 50%; background-color: orange;
                        justify-content:center;align-items:center;}
                    .dots-container .pin.active { border: .3vw solid skyblue;}
                </style>
                <script>
                    var actualClip = 0;
                    const clips = document.querySelectorAll(".clip")
                    const pins = document.querySelectorAll('.pin')
                    const < = (n) => {
                        clips.forEach((clip) => {
                            clip.style.display = "none"
                            pins.forEach((pin) => {
                                pin.classList.remove("active")
                            })
                        })
                        clips[n].style.display = "block"
                        pins[n].classList.add("active")
                    }
                    document.addEventListener("DOMContentLoaded", <(actualClip))
                    const next3 = () => {
                        actualClip >= clips.length - 1 ? actualClip = 0 : actualClip++
                        <(actualClip)
                    }
                    const prev3 = () => {
                        actualClip <= 0 ? actualClip = clips.length - 1 : actualClip--
                        <(actualClip)
                    }
                    document.querySelector(".next3").addEventListener('click', next3)
                    document.querySelector(".prev3").addEventListener('click', prev3)
                    setInterval(() => {
                        next3()
                    }, 5000);
                    pins.forEach((pin, index) => {
                        pin.addEventListener("click", () => {
                            <(index)
                            actualClip = 0
                        })
            
                    })
                </script>

JavaScript - slider - trial

Content

colorful slider

image slider

multiple slideshows

another image slider