XOmisse Dynamic Image Slider for Blogger

head.html

<!-- include XO Slider CSS -->
<link rel='stylesheet' src='https://gist.githubusercontent.com/xomisse/a9ba9575fcb95e820af61c55e2c08472/raw/adb20a4cd94cd33afda82d108c9901a42aaf084a/xo-slider-style.css'/>
<!-- include FontAwesome -->
<script src='https://use.fontawesome.com/##############.js'/>
<!-- include jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'/>
<!-- include Cycle2 -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js' type='text/javascript'/>
<!-- include XO Slider JS -->
<script src='https://gist.githubusercontent.com/xomisse/a9ba9575fcb95e820af61c55e2c08472/raw/adb20a4cd94cd33afda82d108c9901a42aaf084a/xo-slider.js' type='text/javascript'/>

index.html

<div class='cycle-slideshow' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1600' data-cycle-timeout='0'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></div><!-- .cycle-slideshow -->

xo-slider-style.css

/* Start XOmisse Blog Slider */

.cycle-slideshow {
    width: 100%;
    height: 400px;
    display: block;
    text-align: center;
    z-index: 0;
    overflow: hidden;
    margin: 0
}


.cycle-slideshow ul {
    width: 100%;
    height: 100%;
    height: 100vh;
    padding: 0
}

.cycle-slideshow li {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.cycle-prev,
.cycle-next {
    position: absolute;
    top: 0;
    width: 11%;
    opacity: .92;
    filter: alpha(opacity=92);
    z-index: 800;
    height: 100%;
    cursor: pointer;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    opacity: 0;
}

.cycle-slideshow:hover .cycle-prev,
.cycle-slideshow:hover .cycle-next {
    opacity: 1;
}

.cycle-prev {
	left: 10px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    color: #fff;
    outline: 0;
    z-index: 999;
    border: 1px solid #fff;
    height: 30px;
    width: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
}

.cycle-next {
    right: 10px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    color: #fff;
    outline: 0;
    z-index: 999;
    border: 1px solid #fff;
    height: 30px;
    width: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
}

.slide-inside {
    display: table;
    vertical-align: middle;
    height: 100%;
    padding: 0;
    width: 100%;
    background: transparent;
    transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out
}

.slide-inside:hover {
    background: rgba(255, 255, 255, 0.1)
}

.slide-title,
.slide-title a:hover {
    display: table-cell;
    vertical-align: middle;
}

.slide-image {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%
}

/* Hide Text Container
.slide-container {
    background: rgba(255, 255, 255, .5);
    display: block;
    padding: 0;
    width: 40%;
    margin: 0 auto;
    padding: 20px
} 
*/

.slide-cat { 
    display: inline-block;
    margin: 0 3px 13px;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 2px;
}

.slide-h2 {
    color: #fff;
    font-size: 24px;
    line-height: 1.4em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
	display: block;
    z-index: 9
}

.slide-excerpt {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0 0 20px;
    display:none;
}

.slide-divider {
    border-top: 2px solid;
    display: block;
    max-width: 50px;
    margin: 0 auto;
    color: #fff;
}

.slide-more {
    display: none;
    color: #fff;
    padding: 10px 15px;
    margin: 25px auto 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid #fff;
    display: inline-block;
    transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
}

.slide-more:hover {
    background: #fff;
    color: #000;
}

#crosscol-overflow {
    margin: 0 auto;
}

.mobile .cycle-slideshow {
    height: 250px;
}

.mobile .slide-resume,
.mobile .slide-more {
    display: none;
}

xo-slider.js

//<![CDATA[
// Written by XOmisse for xomisse.com
		var showpostthumbnails = true;
		var showpostsummary = true;
		var random_posts = false;
		var numchars = 100;
		var numposts = 4;

		function showgalleryposts(json) {
		    var numPosts = json.feed.openSearch$totalResults.$t;
		    var indexPosts = new Array();
		    document.write('<ul>');
		    for (var i = 0; i < numPosts; ++i) {
		        indexPosts[i] = i
		    }
		    if (random_posts == true) {
		        indexPosts.sort(function() {
		            return 0.5 - Math.random()
		        })
		    }
		    if (numposts > numPosts) {
		        numposts = numPosts
		    }
		    for (i = 0; i < numposts; ++i) {
		        var entry = json.feed.entry[indexPosts[i]];
		        var posttitle = entry.title.$t;
				var cate = json.feed.entry[i].category[0].term;		


		        for (var k = 0; k < entry.link.length; k++) {
		            if (entry.link[k].rel == 'alternate') {
		                posturl = entry.link[k].href;
		                break
		            }
		        }

		        if ("content" in entry) {
		            var postcontent = entry.content.$t
		        }

		        s = postcontent;
		        a = s.indexOf("<img");
		        b = s.indexOf("src=\"", a);
		        c = s.indexOf("\"", b + 5);
		        d = s.substr(b + 5, c - b - 5);
		        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
		            var thumburl = d
		        } else var thumburl = '../1.bp.blogspot.com/-F2HXN2bB1rg/VUCeZj97wWI/AAAAAAAAARw/qbVqd47fcFw/s1600/bg.png';
		        document.write('<li><div class="cycle-slideshow"><a href="' + posturl + '"><div class="slide-image" style="background-image:url(' + thumburl + ');"/><div class="slide-inside"><div class="slide-title">');
		        document.write('<div class="slide-container">');
				document.write('<div class="slide-cat">' + cate + '</div>');
		        document.write('<div class="slide-h2">' + posttitle + '</div>');
		        var re = /<\S[^>]*>/g;
		        postcontent = postcontent.replace(re, "");
		        if (showpostsummary == true) {
		            if (postcontent.length < numchars) {
		                document.write('<div class="slide-excerpt">' + postcontent + '... </div>');
		            } else {
		                postcontent = postcontent.substring(0, numchars);
		                var quoteEnd = postcontent.lastIndexOf(" ");
		                postcontentl = postcontent.substring(0, quoteEnd);
		                document.write('<div class="slide-excerpt">' + postcontent + '... </div>');
		            }
					document.write('<div class="slide-divider"></div>');
		            document.write('<div class="slide-more">Read More</div></div></div></div>');
		        }
		        document.write('</a></div></li>');
		    }
		    document.write('</ul>');
document.write("<div class='cycle-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div><div class='cycle-next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>");
		}
//]]>