How to stop the slider after the elements run out?

Question

PHP

Hello!

I have slider

$(document).ready(function() {	
    $("a.photo").fancybox(
            {                       
          "padding" : 0,
          "imageScale" : false, 
            "zoomOpacity" : false,
            "zoomSpeedIn" : 1000,   
            "zoomSpeedOut" : 1000,  
            "zoomSpeedChange" : 1000, 
            "frameWidth" : 700,  
            "frameHeight" : 600, 
            "overlayShow" : true, 
            "overlayOpacity" : 0.7, 
            "hideOnContentClick" :false,
            "centerOnScroll" : false,		
      helpers: {		
        overlay: {			
        locked: false		
        }	
      }
                
            });					
      $(".fancy_photo").fancybox(	
      {			
        "padding" : 30,	
        wrapCSS    : 'fancy-slider',				
        helpers: {			
          overlay: {			
          locked: false			
          }			
        },			
        beforeShow  : function() {		
          $('.slider-for').slick({		
            slidesToShow: 1,				
            slidesToScroll: 1,					
            arrows: false,				
            fade: true,						
            asNavFor: '.slider-nav'					
          });					
          $('.slider-nav').slick({	
            slidesToShow: 4,		
            slidesToScroll: 1,		
            asNavFor: '.slider-for',	
            dots: false,				
            vertical:true,
            focusOnSelect: true,
            prevArrow : '<button type="button" class="slick-prev"></button>',
            nextArrow : '<button type="button" class="slick-next"></button>'							
          });											
        }			
        ,afterClose: function ()		
        {				
          $('.slider-for').slick('unslick');	
          $('.slider-nav').slick('unslick');	
          }	
        });
});

Call code in template

<?foreach ($arResult["SECTIONS"] as $arSection) {?>
    <?foreach ($arSection["ELEMENTS"] as $arItem) {?>
<div class = "fancybox_slider" id = "slider_photo-<?=$arItem["ID"]?>">
    <div class = "slider-for">
        <?foreach ($arItem["PHOTO"] as $arPhoto) {
            ?><div><img src="<?=$arPhoto["SRC"]?>"></div><?
        }?>
    </div>
    <div class = "slider-nav">
        <?foreach ($arItem["PHOTO"] as $arPhoto) {
            ?><div><img src="<?=$arPhoto["SRC"]?>"></div><?
        }?>
    </div>
</div>
    <?
    }
}?>

result_modifier

$arSelect = array(
  'ID', 
  'IBLOCK_ID',
  'PROPERTY_PHOTO',
  'PREVIEW_PICTURE',
  'DETAIL_PICTURE'
  );

    foreach ($arResult["SECTIONS"] as &$arSection) {
        $rsPhotoElements = CIBlockElement::GetList(array("SORT" => "ASC", "NAME" => "ASC"), array("IBLOCK_ID" => $arParams["IBLOCK_ID"], "SECTION_ID" => $arSection["ID"], "ACTIVE" => "Y"), false, false, $arSelect);
        $i = 4;
        while ($i && $arElement = $rsPhotoElements->GetNext()) {
            $photo = CFile::ResizeImageGet($arElement["DETAIL_PICTURE"], array('width'=>200, 'height'=>180), BX_RESIZE_IMAGE_PROPORTIONAL);
            $arElement["PREVIEW_PICTURE"] = $photo['src'];
            $arElement["DETAIL_PICTURE"] = CFile::GetFileArray($arElement["DETAIL_PICTURE"]);
            $arElement["PHOTO"][] = $arElement["DETAIL_PICTURE"];
            foreach ($arElement["PROPERTY_PHOTO_VALUE"] as $mphoto) {
                $arElement["PHOTO"][] = CFile::GetFileArray($mphoto);
            }
            $arSection["ELEMENTS"][] = $arElement;
            $i--;
        }
    }

The slider is working. but! It scrolls endlessly to the right. I need that when it reaches the last element, the down button disappears and it stops.

Answer 1

If I correctly understood your problem, then in order for the slick-slider not to scroll, a function was invented: infinite: false;
well, in order for the arrow to disappear as you say, then again the magic of css and the slick-slider itself, by default it seems the arrow that cannot be clicked has in styles: opacity: .25, the working arrow has opacity: 1;

Answer 2

https://jsfiddle.net/u6ta9vLk/