Amazing slider show recent post for blogger use flickity library

The problem with this slider is that when you use the button to go left or right, the AutoPlay option is turned off
<link rel="stylesheet" href="https://npmcdn.com/flickity@2/dist/flickity.css" media="screen"> <script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script> <style> /* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } .carousel { background: #EEE; width:70% } .carousel-cell { width: 100%; height: 300px; margin-right: 10px; border-radius: 5px; } .carousel-cell img{width:100%; height:100%} .title-recpost, .flickity-page-dots{display:none} .carousel-cell:hover .title-recpost{ display: flex; position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); width: 90%; height: 20%; justify-content: center; align-items: center; color:white; transition: 0.5s; background: #0000008c; border-radius: 5px; text-decoration:none } } .flickity-prev-next-button { background: #00000029; </style> <center> <div class="carousel" data-flickity='{ "autoPlay": true , "autoPlay": 1500 , "contain": true , "loop":true }'> <script type="text/javascript"> function mycallback(json) { for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { var postUrl = json.feed.entry[i].link[j].href; break;}} var postTitle = json.feed.entry[i].title.$t; if (json.feed.entry[i].media$thumbnail != null){ var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/'); var item = '<div class="carousel-cell"><img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>'; } else{ var item = '<div class="carousel-cell"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>'; } document.write(item) } } </script> <script src="https://sports-themexpose.blogspot.com/feeds/posts/summary?max-results=100&alt=json-in-script&callback=mycallback"></script> </div> </center>

© Manajmnt code

Share to :

☷✎