Slideshow Markup

Basic HTML markup and CSS for responsive horizontal slideshow. Requires jQuery

by the_voder

HTML

<!--
Basic jQuery responsive slideshow example.

Uses placeholder images from Lorem Picsum
https://picsum.photos
-->

<!-- This element contains the slideshow, and provides a "mask" showing only one slideshow item at a time -->
<div class="slidecontainer">
    <!-- Slideshow controls overlay -->
    <div class="slidecontrols">
        <span class="slideprev">&lt;</span>
        <span class="slidenext">&gt;</span>
    </div>
    <!-- Wrapper around slideshow items -->
    <div class="slidewrapper">
        <!-- Semantic HTML container for a picture and its caption -->
        <figure>
            <img src="https://picsum.photos/640/480?random=1" alt="Random image 1">
            <figcaption>Picture 1</figcaption>
        </figure>
        <figure>
            <img src="https://picsum.photos/640/480?random=2" alt="Random image 2">
            <figcaption>Picture 2</figcaption>
        </figure>
        <figure>
            <img src="https://picsum.photos/640/480?random=3" alt="Random image 3">
            <figcaption>Picture 3</figcaption>
        </figure>
        <figure>
            <img src="https://picsum.photos/640/480?random=4" alt="Random image 4">
            <figcaption>Picture 4</figcaption>
        </figure>
        <figure>
            <img src="https://picsum.photos/640/480?random=5" alt="Random image 5">
            <figcaption>Picture 5</figcaption>
        </figure>
    </div>
</div>

CSS

/* apply a natural box layout model to all elements, but allowing components to change */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* Container for slideshow */

.slidecontainer {
    margin: 20px auto;
    padding: 0;
    border: 1px dashed #ddd;
    width: 50vw;
    overflow: hidden;
    position: relative;
}

/* Slideshow forward/back control overlay */

.slidecontrols {
    /* Force control overlay on top of other sibling elements */
    position: absolute;
    z-index: 99;
    margin: 0;
    /* Setting 0 for all 4 corners forces element to fill container completely */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4%;
    background-color: rgba(0, 0, 0, 0.1);
    /* Centre prev/next controls with Flexbox */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.slidecontrols span {
    margin-top: -20px;
    color: white;
    font-size: 24px;
    text-shadow: 0px 0px 7px #000000;
    cursor: pointer;
}

/* Wrapper around slideshow items */

.slidewrapper {
    position: relative;
    margin: 0;
    padding: 0;
    /* Adjust width to number of slides (ie 500% for 5 slides) */
    width: 500%;
    display: flex;
}

/* Slideshow item (semantic HTML container for image and image caption) */

.slidewrapper figure {
    margin: 0;
    padding: 5px;
    /* Adjust width according to number of slides */
    width: 20%;
}

/* Slideshow image */

.slidewrapper img {
    width: 100%;
    /* Images should all have same proportions, for best results */
    height: auto;
}

/* Slideshow image caption */

.slidewrapper figcaption {
    padding: 10px;
}

JavaScript

////////////////////////////////////////////
// Example basic manual jQuery slide code //
////////////////////////////////////////////

$(document).ready(function() {
    // Current Slide index
    var currentSlide = 0;
    // Number of slides
    var lastSlide = $(".slidecontainer figure").length - 1;
	
    // Function to move slide container
    function moveSlide(direction) {
        // Calculate index of next slide
        if (direction == "prev")
            currentSlide = (currentSlide == 0) ? lastSlide : currentSlide - 1;
        else if (direction == "next")
            currentSlide = (currentSlide == lastSlide) ? 0 : currentSlide + 1;
        // Create new position string
        var newPos = "-" + (100 * currentSlide) + "%";
        // Move slide container
        $(".slidewrapper").animate({
            left: newPos
        }, 1000)
    }

    // Bind to slideshow "Prev" control
    $(".slidecontrols .slideprev").on("click", function() {
        moveSlide("prev");
    });

    // Bind to slideshow "Next" control
    $(".slidecontrols .slidenext").on("click", function() {
        moveSlide("next");
    });
});