Posts Slider Animation Auto_Anutrickz

---

<div class='clear'/>

---

<b:widget id='PopularPosts012' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='AT_slidecontainer'>
      <svg class='arrow' height='27' id='slide-left' viewBox='0 0 16 27' width='14.6' xmlns='http://www.w3.org/2000/svg'><path d='M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z'/></svg>
    <section id='A__slider'>
      <b:loop values='data:posts' var='post'>
          <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='slider-details'><a expr:href='data:post.href'><data:post.title/></a></div>
           
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;Slide_thumbnail&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 672, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
             
            </b:if>
            <div class='slider-details'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
          <div style='clear: both;'/>
        </b:if>
      
      </b:loop>
    </section>
    
    <svg class='arrow' height='27' id='slide-right' viewBox='0 0 16 27' width='14.6' xmlns='http://www.w3.org/2000/svg'><path d='M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z'/></svg>
  </div>
</b:includable>
    </b:widget>
 

  <div class='clear'/>

<style>

.AT_slidecontainer { max-width: 1000px;position: relative; display: flex; justify-content: center; align-items: center;padding: 0 12px; margin: 0 auto; } #slide-left{left: 0; z-index: 999;} #slide-right{right: 0; z-index: 999;} .arrow { width: 2rem; fill: #000!important; margin: 0 1rem;position: absolute; } #slide-right{-webkit-transform: scaleX(-1); transform: scaleX(-1); } section#A__slider { width: 100%; /* height: 300px; */ margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; /* border: 1px solid black; */ } section#A__slider::-webkit-scrollbar { display:none; } section#A__slider .Slide_thumbnail { flex: 0 0 auto; object-fit: cover;position: relative; cursor: pointer; width: 530px; height: 328px; border: 1px solid #555; overflow: hidden; transform: scale(.95); transition: all .3s; } #A__slider .Slide_thumbnail img{width: 100%; height: 100%; object-fit: cover;} section#A__slider .thumbnail:hover { transform: scale(1); } .slider-details { z-index: 9; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: 1; transition: all .3s; background: linear-gradient(0deg, rgb(2, 0, 36) 10%, rgba(0, 0, 0, 0) 100%); } @media (max-width: 480px){section#A__slider .Slide_thumbnail{width: 230px!important; height: 144px!important;}} .slider-details h2 { font-size: 1.2rem; font-weight: 500; } .slider-details a { color: #fff!important; display: table-cell; width: 100%; padding: 15px 10px; vertical-align: middle; font-weight: bold; }

</style>

<script>
//<![CDATA[
let thumbnails=document.getElementsByClassName("Slide_thumbnail"),slider=document.getElementById("A__slider"),buttonRight=document.getElementById("slide-right"),buttonLeft=document.getElementById("slide-left");buttonLeft.addEventListener("click",function(){slider.scrollLeft-=125}),buttonRight.addEventListener("click",function(){slider.scrollLeft+=125});const maxScrollLeft=slider.scrollWidth-slider.clientWidth;function autoPlay(){slider.scrollLeft>maxScrollLeft-1?slider.scrollLeft-=maxScrollLeft:slider.scrollLeft+=1}let play=setInterval(autoPlay,30);for(var i=0;i<thumbnails.length;i++)thumbnails[i].addEventListener("mouseover",function(){clearInterval(play)}),thumbnails[i].addEventListener("mouseout",function(){return play=setInterval(autoPlay,30)});
//]]>
</script> 

---