 <script>
		jQuery(document).ready(function() {
		jQuery('#mainslider').slick({
		 infinite: true,
		  slidesToShow: 1,
		   slidesToScroll: 1,
		  autoplay: true,
		  autoplaySpeed: 6000,
		  dots: true,
		  vertical: false,
		  arrows: false,
		  <?php if(get_the_lang() !=='en') {?>
		  rtl:true,
		  <?php } ?>
		  fade: true,
		  centerMode:false,
		  centerPadding:'0px',
		   lazyLoad: 'ondemand',
		     responsive: [

{

breakpoint: 1025,

settings: {

arrows: false,
dots:false,
autoplay: true,



}

},
]
	   
	 });
});  
	   
	</script>

<div class="slider-area">
<div id="mainslider">
	
<?php if(have_rows('slider')): while(have_rows('slider')): the_row(); 
	$image = get_sub_field('slider_img');
	$size = 'slider';
	$thumb = $image['sizes'][ $size ];
	$alt = $image['alt']; 
	?>
  <div class="slider-item">
 <div class="slider-image"> 
 	<img src="<?php echo $thumb;?>" class="msimg" alt="<?php  echo $alt; ?>" />
 </div>

 
</div><!--item-->       

          <?php 
		  endwhile;
		  endif;
		  ?>    


</div><!--mainslider-->
</div><!--area-->
