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>

Amazing slider show recent post for blogger use flickity library

☷✎

Amazing slider show recent post for blogger use flickity library

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

Custom permalink creator for blogger

GIMP: A Powerful Open-Source Image Editing Software

blogger meta description generator

Amazing slider show recent post for blogger use flickity library

Related

Comments

Post a Comment