{"id":1054,"date":"2015-10-10T10:11:20","date_gmt":"2015-10-10T10:11:20","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/?p=1054"},"modified":"2016-02-08T12:05:38","modified_gmt":"2016-02-08T12:05:38","slug":"image-slider","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/image-slider\/","title":{"rendered":"Image Slider"},"content":{"rendered":"
\n
\"IMG_5373\"<\/a>\"IMG_3277\"<\/a>\"IMG_3205\"<\/div>\n<\/section>\n

 
\nPauses on hover.<\/p>\n

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.<\/p>\n

Based on You Don’t Need JavaScript for That!<\/a>. 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<\/del> want a slider.<\/p>\n

Could be adapted to provide nav, the first two images above are links.<\/p>\n

Update: I broke this by switching theme which removed the custom CSS<\/strong><\/del> fixed
\n<\/p>\n

HTML added to post:
\n<\/h3>\n
\n
<section<\/span> class=<\/span>\"slideshow\"<\/span>><\/span>\n<div<\/span> class=<\/span>\"slideshow-container slide\"<\/span>><a<\/span> target=<\/span>\"new\"<\/span> href=<\/span>\"http:\/\/johnjohnston.info\/blog\"<\/span>><img<\/span> class=<\/span>\"alignnone size-full wp-image-1058\"<\/span> src=<\/span>\"https:\/\/blogs.glowscotland.org.uk\/nl\/public\/JohnJohnston\/uploads\/sites\/2\/2015\/10\/IMG_5373.jpg\"<\/span> alt=<\/span>\"IMG_5373\"<\/span> width=<\/span>\"600\"<\/span> height=<\/span>\"240\"<\/span> \/><\/a><a<\/span> target=<\/span>\"new\"<\/span> href=<\/span>\"https:\/\/www.flickr.com\/photos\/troutcolor\/\"<\/span>><img<\/span> class=<\/span>\"alignnone size-full wp-image-1057\"<\/span> src=<\/span>\"https:\/\/blogs.glowscotland.org.uk\/nl\/public\/JohnJohnston\/uploads\/sites\/2\/2015\/10\/IMG_3277.jpg\"<\/span> alt=<\/span>\"IMG_3277\"<\/span> width=<\/span>\"599\"<\/span> height=<\/span>\"238\"<\/span> \/><\/a><img<\/span> class=<\/span>\"alignnone size-full wp-image-1056\"<\/span> src=<\/span>\"https:\/\/blogs.glowscotland.org.uk\/nl\/public\/JohnJohnston\/uploads\/sites\/2\/2015\/10\/IMG_3205.jpg\"<\/span> alt=<\/span>\"IMG_3205\"<\/span> width=<\/span>\"600\"<\/span> height=<\/span>\"240\"<\/span> \/><\/div><\/span>\n<\/section><\/span>\n<\/pre>\n<\/div>\n
CSS added to Appearance -> Edit CSS<\/h3>\n
\n
.slideshow<\/span> {\n    width<\/span>:<\/span> 600px<\/span>;\n    margin<\/span>:<\/span> 0<\/span> auto<\/span>;\n    overflow<\/span>:<\/span> hidden<\/span>;\n    border<\/span>:<\/span> solid<\/span> 1px<\/span> #fff<\/span>;\n}\n\n.slideshow-container<\/span> {\n    width<\/span>:<\/span> 1800px<\/span>;\n    font-size<\/span>:<\/span> 0<\/span>;\n    transition:<\/span> 1s<\/span> ease;\n    height<\/span>:<\/span> 240px<\/span>;\n}\n\n.slideshow-container<\/span>:hover<\/span> {\n    animation-<\/span>play-<\/span>state:<\/span> paused;\n}\n\n.slideshow-container<\/span> img<\/span>,<\/span>.slideshow-container<\/span> .text-container<\/span> {\n    width<\/span>:<\/span> 600px<\/span>;\n    height<\/span>:<\/span> auto<\/span>;\n    display<\/span>:<\/span> inline<\/span>-<\/span>block<\/span> !important<\/span>;\n    font-size<\/span>:<\/span> 16px<\/span>;\n    text-align<\/span>:<\/span> center<\/span>;\n}\n\n.text-container<\/span> {\n    height<\/span>:<\/span> 240px<\/span>;\n    position<\/span>:<\/span> relative<\/span>;\n}\n\np<\/span> {\n    position<\/span>:<\/span> relative<\/span>;\n    top<\/span>:<\/span> -45<\/span>%<\/span>;\n    padding<\/span>:<\/span> 5px<\/span>;\n}\n\n.slide<\/span> {\n    animation:<\/span> slide 18s<\/span> ease infinite;\n}\n\n@keyframes<\/span> slide<\/span> {\n    0<\/span>%<\/span> {\n        transform:<\/span> translateX(0<\/span>%<\/span>);\n    }\n    \n    12<\/span>.5<\/span>%<\/span> {\n        transform:<\/span> translateX(0<\/span>%<\/span>);\n    }\n    \n    33<\/span>%<\/span> {\n        transform:<\/span> translateX(-600px<\/span>);\n    }\n    \n    37<\/span>.5<\/span>%<\/span> {\n        transform:<\/span> translateX(-600px<\/span>);\n    }\n    \n    60<\/span>%<\/span> {\n        transform:<\/span> translateX(-1200px<\/span>);\n    }\n    \n    62<\/span>.5<\/span>%<\/span> {\n        transform:<\/span> translateX(-1200px<\/span>);\n    }\n    \n    100<\/span>%<\/span> {\n        transform:<\/span> translateX(0<\/span>);\n    }\n}\n<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
  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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18],"tags":[64887,15],"class_list":["post-1054","post","type-post","status-publish","format-standard","hentry","category-media","tag-css","tag-test","eportfolio_category-none"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":14,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":1225,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/posts\/1054\/revisions\/1225"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/JohnJohnston\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}