<% if Top.LatestPost(30) %>
<div class="hrspace"></div>
 <div class="slider-frame-swiper" id="slider-frame_Blog">
 <div class="margin-left15 slider_heading" style="font-size: 22px;">Blogs</div><div style="padding-left:10px;z-index:1;" class="slider_heading"><a href="/news-feed/" style="color:red;">VIEW ALL</a></div>
    <div class="swiper swiper-container" id="swiper-Blog">
  <div class="swiper-wrapper">
    <% loop $LatestPost %>
<div class="swiper-slide swiper-slide-Blog h-100" >
<div class="howerdiv">
         <div class="slide_inactive slidecat_Blog"><a href="{$Link}">
  <% if $PostPreviewImage %>
   <img class="sldimg" src='$PostPreviewImage.Fill('480','360').URL' style="border-radius: 8px;" />
            <span class="image" data-image-id="$PostPreviewImage.ID" style="background-image: url('$PostPreviewImage.Fill('480','360').URL');"></span>
        <% else_if $FeaturedImage %>
        <img class="sldimg" src='$FeaturedImage.Fill('480','360').URL' style="border-radius: 8px;" />
            <span class="image" data-image-id="$FeaturedImage.ID" $style="background-image: url('$FeaturedImage.Fill('480','360').URL');"></span>
        <% else %>
         <img class="sldimg" src='https://lamicasa.in/assets/Uploads/480x360.gif' style="border-radius: 8px;" />
            <span class="image" style="background-image: url('https://lamicasa.in/assets/Uploads/480x360.gif');"></span>
        <% end_if %>
       </a>
      </div>
      </div>
       <div style="margin-top: 10px;">
     <span style="text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: 100%;overflow: hidden;display: -webkit-box;">
        <% if $Title %>
                      $Title
                  <% end_if %>
              </span>
            <!--  <span style="text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: 100%;overflow: hidden;display: -webkit-box;">
             <% if $PublishDate %>
                <span class="date">
              $PublishDate.FormatPHP("j M Y")
                </span>
            <% end_if %>
   </span>-->
        </div>
</div>
      
      <% end_loop %>  
 
</div>
<div class="swiper-button-prev swiperBtn-left-Blog"></div>
  <div class="swiper-button-next swiperBtn-right-Blog"></div>
 </div>
 </div>
 <script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'

   const mySwiper_Blog = new Swiper('#swiper-Blog', {
    spaceBetween: 3,
    autoHeight: true,
    loop: true,
    freeMode: {
    enabled: true,
    sticky: true,
  },
    breakpointsBase: 'container',
   // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 3
    },
    // when window width is >= 480px
    600: {
      slidesPerView: 2,
      spaceBetween: 4
    },
     750: {
      slidesPerView: 3,
      spaceBetween: 5
    },
    // when window width is >= 640px
    1020: {
      slidesPerView: 4,
      spaceBetween: 6
    },
    1600: {
      slidesPerView: 5,
      spaceBetween: 7
    }
  },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
       },
       on: {
    slideChange: function () {
      const index_currentSlide      = this.activeIndex;
      const currentSlide            = this.slides[index_currentSlide]
     $(this.slides).each(function( index ) {
     $(this).removeAttr( "id" );
      $(this).css("opacity","0.5");
   $(this).find('.slidecat_Blog').removeClass('slide_inactive');
    $(this).find('.slidecat_Blog').removeClass('slide');
     $(this).find('.slidecat_Blog').removeClass('left');
      $(this).find('.slidecat_Blog').removeClass('right');
    $(this).find('.slidecat_Blog').addClass('slide_inactive');
});
var x=0;
 for(var index = index_currentSlide; index< (index_currentSlide+this.params.slidesPerView); index++){
      $(this.slides[index]).find('.slidecat_Blog').addClass('slide');
      $(this.slides[index]).attr("id","current_Blog"+"_"+x);
       $(this.slides[index]).css("opacity","unset");
      x++;
      }
    },
    init: function () {
      const index_currentSlide      = this.activeIndex;
      const currentSlide            = this.slides[index_currentSlide]
      var x=0;
      for(var index = index_currentSlide; index< (index_currentSlide+this.params.slidesPerView); index++){
      $(this.slides[index]).find('.slidecat_Blog').removeClass('slide_inactive');
      $(this.slides[index]).find('.slidecat_Blog').addClass('slide');
      $(this.slides[index]).attr("id","current_Blog"+"_"+x);
      x++;
      }
       var btnLeft = $(".swiperBtn-left-Blog").parent().offset().left;
     $(".swiperBtn-left-Blog").css('left',"-"+btnLeft+"px");
      $(".swiperBtn-right-Blog").css('right',"-"+btnLeft+"px");
       $(".swiperBtn-left-Blog").css('opacity',"0");
      $(this.slides[index]).css("opacity","0.5");
    },
    resize: function () {
      var btnLeft = $(".swiperBtn-left-Blog").parent().offset().left;

     $(".swiperBtn-left-Blog").css('left',"-"+btnLeft+"px");
      $(".swiperBtn-right-Blog").css('right',"-"+btnLeft+"px");
       $(".swiperBtn-left-Blog").css('opacity',"0");
         const index_currentSlide      = this.activeIndex;
      const currentSlide            = this.slides[index_currentSlide]
     $(this.slides).each(function( index ) {
     $(this).removeAttr( "id" );
      $(this).css("opacity","0.5");
   $(this).find('.slidecat_Blog').removeClass('slide_inactive');
    $(this).find('.slidecat_Blog').removeClass('slide');
     $(this).find('.slidecat_Blog').removeClass('left');
      $(this).find('.slidecat_Blog').removeClass('right');
    $(this).find('.slidecat_Blog').addClass('slide_inactive'); 
});
var x=0;
 for(var index = index_currentSlide; index< (index_currentSlide+this.params.slidesPerView); index++){
      $(this.slides[index]).find('.slidecat_Blog').removeClass('slide_inactive');
      $(this.slides[index]).find('.slidecat_Blog').addClass('slide');
      $(this.slides[index]).attr("id","current_Blog"+"_"+x);
      $(this.slides[index]).css("opacity","unset");
      x++;
      }
      $(".swiperBtn-left-Blog").css({'top': (($(".slidecat_Blog").height()/2)+29)+"px"});
      $(".swiperBtn-right-Blog").css({'top': (($(".slidecat_Blog").height()/2)+29)+"px"});
    },
    afterInit: function () {
     const index_currentSlide      = this.activeIndex;
      const currentSlide            = this.slides[index_currentSlide]
      var x=0;
      for(var index = index_currentSlide; index< (index_currentSlide+this.params.slidesPerView); index++){
      $(this.slides[index]).find('.slidecat_Blog').removeClass('slide_inactive');
      $(this.slides[index]).find('.slidecat_Blog').addClass('slide');
      $(this.slides[index]).attr("id","current_Blog"+"_"+x);
      x++;
      }
      $(this.slides[index]).css("opacity","0.5");
    }
  }
    });
$(document).ready(function(){
 var swConHeight = $(".slidecat_Blog").height();
  $(".swiperBtn-left-Blog").css({'top': ((swConHeight/2)+29)+"px"});
  $(".swiperBtn-right-Blog").css({'top': ((swConHeight/2)+29)+"px"});
    let swiperSlide_Blog = document.getElementsByClassName('swiper-slide-Blog');
var timer = null;
    for(var index = 0; index< swiperSlide_Blog.length; index++){
    swiperSlide_Blog[index].getElementsByClassName('slidecat_Blog')[0].addEventListener( "mouseenter",function(e){
      thisele_Blog = $(this);
       window.clearTimeout(timer);
 timer = window.setTimeout(function () {
         var slideID = thisele_Blog.parent().attr('id');
         var firstSlideID= "current_Blog"+"_0";
         var lastSlideID= "current_Blog"+"_"+(mySwiper_Blog.params.slidesPerView - 1);
           var currentWidth = thisele_Blog.parent('.swiper-slide-Blog').width();
           var currentHeight = thisele_Blog.parent('.swiper-slide-Blog').height();
        var widthIncrement = currentWidth*(2/5);
        var heightIncrement = currentHeight*(2/5);
         thisele_Blog.animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
          thisele_Blog.parent().animate({"left":"0px"}, { duration: 340, queue: false });
            thisele_Blog.parent().nextAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
             thisele_Blog.parent().prevAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
          if(slideID){
          thisele_Blog.addClass("hovered",1);
        if(slideID == firstSlideID){
       thisele_Blog.addClass("left",1);
         thisele_Blog.parent().nextAll().animate({"left":""+(widthIncrement)+"px"}, { duration: 340, queue: true});
        }else if(slideID == lastSlideID){
          thisele_Blog.addClass("right",1);
          thisele_Blog.parent().prevAll().animate({"left":"-"+(widthIncrement)+"px"}, { duration: 340, queue: true});
          }else{
        thisele_Blog.parent().nextAll().animate({"left":""+(widthIncrement/2)+"px"}, { duration: 340, queue: true});
          thisele_Blog.parent().prevAll().animate({"left":"-"+(widthIncrement/2)+"px"}, { duration: 340, queue: true});
          }
          }
        },300);
    }
    );
    swiperSlide_Blog[index].getElementsByClassName('slidecat_Blog')[0].addEventListener( "mouseleave",function(e){
    window.clearTimeout(timer);
       var slideID = $(this).parent().attr('id');
         var firstSlideID= "current_Blog"+"_0";
         var lastSlideID= "current_Blog"+"_"+(mySwiper_Blog.params.slidesPerView - 1);
           var currentWidth = $(this).parent('.swiper-slide-Blog').width();
            var currentHeight = $(this).parent('.swiper-slide-Blog').height();
        var widthIncrement = currentWidth*(2/5);
         var heightIncrement = currentHeight*(2/5);
          if(slideID){
           $(this).removeClass("hovered",1);
          if(slideID == firstSlideID){
         $(this).animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: true });
           $(this).parent().nextAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
          }else if(slideID == lastSlideID){
          $(this).animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
           $(this).parent().prevAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
          }else{
           $(this).animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
           $(this).parent().prevAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
            $(this).parent().nextAll().animate({"left":"0px","transform-origin":"initial"}, { duration: 340, queue: false });
          }
          }
    })
    }
});
</script>
 <% end_if %>