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); } }
Leave a Reply