Image Slider

Pauses on hover.

I’ve heard a few folk mention that they would like image sliders in Glow Blogs. A plugin may come at some point, but it is possible at the moment with a wee bit of work.

Based on You Don’t Need JavaScript for That!. I added some CSS using the Custom CSS module from Jetpack. Some footering required to get the sizes sorted. I would not recommend this unless you really ~~need~~ want a slider.

Could be adapted to provide nav, the first two images above are links.

~~Update: I broke this by switching theme which removed the custom CSS~~ fixed

HTML added to post:

<section class="slideshow">
<div class="slideshow-container slide"><a target="new" href="http://johnjohnston.info/blog"><img class="alignnone size-full wp-image-1058" src="https://blogs.glowscotland.org.uk/nl/public/JohnJohnston/uploads/sites/2/2015/10/IMG_5373.jpg" alt="IMG_5373" width="600" height="240" /></a><a target="new" href="https://www.flickr.com/photos/troutcolor/"><img class="alignnone size-full wp-image-1057" src="https://blogs.glowscotland.org.uk/nl/public/JohnJohnston/uploads/sites/2/2015/10/IMG_3277.jpg" alt="IMG_3277" width="599" height="238" /></a><img class="alignnone size-full wp-image-1056" src="https://blogs.glowscotland.org.uk/nl/public/JohnJohnston/uploads/sites/2/2015/10/IMG_3205.jpg" alt="IMG_3205" width="600" height="240" /></div>
</section>

CSS added to Appearance -> Edit CSS

.slideshow {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
    border: solid 1px #fff;
}

.slideshow-container {
    width: 1800px;
    font-size: 0;
    transition: 1s ease;
    height: 240px;
}

.slideshow-container:hover {
    animation-play-state: paused;
}

.slideshow-container img,.slideshow-container .text-container {
    width: 600px;
    height: auto;
    display: inline-block !important;
    font-size: 16px;
    text-align: center;
}

.text-container {
    height: 240px;
    position: relative;
}

p {
    position: relative;
    top: -45%;
    padding: 5px;
}

.slide {
    animation: slide 18s ease infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }
    
    12.5% {
        transform: translateX(0%);
    }
    
    33% {
        transform: translateX(-600px);
    }
    
    37.5% {
        transform: translateX(-600px);
    }
    
    60% {
        transform: translateX(-1200px);
    }
    
    62.5% {
        transform: translateX(-1200px);
    }
    
    100% {
        transform: translateX(0);
    }
}

Image Slider

HTML added to post:

CSS added to Appearance -> Edit CSS

Share this:

Comments

Leave a Reply