CSS - rezmehp/tutorial GitHub Wiki

Slider

<title>Slideshow Images</title> <style> * { box-sizing: border-box } 
    body {
        font-family: Verdana, sans-serif;
        margin: 0
    }

    .slideshow-container {
        max-width: 300px;
        max-height: 150px;
        position: relative;
        margin: auto;
    }

    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }

    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .numbertext {
        color: #ffffff;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    .active {
        background-color: #111111;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: .5s;
        animation-name: fade;
        animation-duration: .5s;
    }

    @keyframes fade {
        from {
            opacity: 1
        }

        to {
            opacity: 3
        }
    }


    @media only screen and (max-width: 300px) {

        .prev,
        .next,
        .text {
            font-size: 11px
        }
    }
</style>

    <div class="mySlides fade">
        <img src="1.jpeg">

    </div>
    <div class="mySlides fade">
        <img src="2.jpeg">

    </div>
    <div class="mySlides fade">
        <img src="4.jpeg">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex - 1].style.display = "block";

        var numbertext = document.getElementById("numbertext").innerText = slideIndex + " / " + slides.length
    }
</script>
⚠️ **GitHub.com Fallback** ⚠️