#if($RelationList.Count > 0) 
    <div class="detail-relatedlist blog-slider">
    #foreach($RelationItem in $RelationList)
     <div class="itme">
    #if(${xf.ViewSkinSetting("RDThumbnail",true)}) 
    #if($RelationItem.AdditionalPicture > 0) 
    <a href="${xf.GoUrl($RelationItem)}">
    <img src="${xf.ThumbnailUrl($RelationItem,${xf.ViewSkinSetting("thumbnail_width",200)},200,"W")}" alt="$RelationItem.Title" title="$RelationItem.Title" />
    </a>
    #end
    #end
    #if(${xf.ViewSkinSetting("RDTitle",true)}) 
    <h3><a href="${xf.GoUrl($RelationItem)}">$RelationItem.Title</a></h3>
    #end
     #if(${xf.ViewSkinSetting("RDAuthor",true)} || ${xf.ViewSkinSetting("RDComments",true)}) 
     <div class="info">
         #if(${xf.ViewSkinSetting("RDAuthor",true)}) 
          <a href="${xf.GoAuthorUrl($RelationItem.CreateUser)}">${xf.ViewUser($RelationItem.CreateUser,"DisplayName")}</a>
         #end
        #if(${xf.ViewSkinSetting("RDAuthor",true)} && ${xf.ViewSkinSetting("RDComments",true)})  <span class="sep">|</span>#end
          #if(${xf.ViewSkinSetting("RDComments",true)}) 
          <a href="${xf.GoUrl($RelationItem)}#comments">$RelationItem.CommentCount ${xf.ViewLanguage("Comments","Comments")}</a>
          #end
       </div>
    #end
     #if(${xf.ViewSkinSetting("RDSummary",true)}) 
     <p>${xf.ViewSummary($RelationItem,${xf.ViewSkinSetting("RSummaryNumber",100)},"...",${xf.ViewSkinSetting("RFormatSummary",false)})}</p>
     #end
      #if(${xf.ViewSkinSetting("RDReadMore",true)}) 
     <a class="more" href="${xf.GoUrl($RelationItem)}">Read More &gt;</a>
     #end
     </div>
    #end
    </div>
#else
    ${xf.ViewLanguage("ArticleEmpty2","Not any article")}
#end





<script type="text/javascript">
	$('.detail-relatedlist.blog-slider').slick({
		infinite:${xf.ViewSkinSetting("infinite","true")},
		accessibility:${xf.ViewSkinSetting("accessibility","true")},
		adaptiveHeight:${xf.ViewSkinSetting("adaptiveHeight","false")},
		autoplay:${xf.ViewSkinSetting("autoplay","true")},
		autoplaySpeed:${xf.ViewSkinSetting("autoplaySpeed","3000")},
		speed:${xf.ViewSkinSetting("speed","300")},
		arrows:${xf.ViewSkinSetting("arrows","true")},
		dots:${xf.ViewSkinSetting("dots","false")}, 
		cssEase:"${xf.ViewSkinSetting("cssEase","ease-in")}", 
		draggable:${xf.ViewSkinSetting("draggable","true")},
		pauseOnHover:${xf.ViewSkinSetting("pauseOnHover","true")},
//		vertical:${xf.ViewSkinSetting("vertical","false")},
//		fade:${xf.ViewSkinSetting("fade","false")},
		slidesToShow: ${xf.ViewSkinSetting("thitems","4")},
		slidesToScroll:#if(${xf.ViewSkinSetting("slidesToScroll","One Page")}=="One Page") ${xf.ViewSkinSetting("thitems","4")} #else 1 #end,
		variableWidth: ${xf.ViewSkinSetting("variableWidth","false")},
		responsive: [
			{
			  breakpoint: 1199,
			  settings: {
				slidesToShow: ${xf.ViewSkinSetting("thDesktop","4")},
				slidesToScroll: #if(${xf.ViewSkinSetting("slidesToScroll","One Page")}=="One Page")${xf.ViewSkinSetting("thDesktop","4")} #else 1 #end
			  }
			},
			{
			  breakpoint: 979,
			  settings: {
				slidesToShow: ${xf.ViewSkinSetting("thDesktopSmall","3")},
				slidesToScroll: #if(${xf.ViewSkinSetting("slidesToScroll","One Page")}=="One Page")${xf.ViewSkinSetting("thDesktopSmall","3")} #else 1 #end
			  }
			},
			{
			  breakpoint: 768,
			  settings: {
				slidesToShow: ${xf.ViewSkinSetting("thTable","2")},
				slidesToScroll: #if(${xf.ViewSkinSetting("slidesToScroll","One Page")}=="One Page")${xf.ViewSkinSetting("thTable","2")} #else 1 #end
			  }
			},
			{
			  breakpoint: 479,
			  settings: {
				slidesToShow: ${xf.ViewSkinSetting("thMobile","1")},
				slidesToScroll: #if(${xf.ViewSkinSetting("slidesToScroll","One Page")}=="One Page")${xf.ViewSkinSetting("thMobile","1")} #else 1 #end
			  }
			}
		 ],
	}) ;
 </script>