<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 != ""'><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 ? "item-content" : "Slide_thumbnail"'>
<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, "1:1") : 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>