동적 변경 후 매끄러운 슬라이더가 작동하지 않습니다.

이 코드는 Ajax 호출을 시도 할 때까지 모든 작업이 정상적으로 작동 할 때까지입니다. 다른 웹 사이트에서 이미지 수를 변경하고 Ajax 호출 후 자동 재생 그림을 다른 사람에게 보냅니다. 이 일을 어떻게하는지 알아?
나는 시도 :
1. 나는 변경 후에 초기화하려고하고 슬라이더가 여전히 멈춘다.
2. 슬라이더에 너비가있는 클래스를 추가하려고합니다.
3. 기능없이 초기화하려고합니다.
내가 수행하려고하는 주요한 것들은 이것을하기에 더 좋은 방법이 있다면 누군가가 그림을 변경하는지 확인하는 것입니다.
동적 변경 후 매끄러운 슬라이더가 작동하지 않습니다.

<?php 
    /*take time form file becuse dont wont to use db*/ 
    $my_file = 'file.txt'; 
    $handle = fopen($my_file, 'r+') or die('Cannot open file: '.$my_file); 
    $data = fread($handle,filesize($my_file)); 
    $data =$data.'000'; 
    ?> 
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>website slider</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="./slick/slick.css"> 
    <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css"> 
    <style> 
    img { 
     height: 100vh; 
     width: 100vw; 
    } 
    .imgc{ 
     height: 100vh; 
     width: 100vw; 
    } 
    </style> 
    </head> 
    <body> 
    <!-- silc that i take from upload folder --> 
    <div class="your-class " id="exampleImage" > 
     <?php 
     $images = glob("upload/*.*"); 
     foreach($images as $image) 
     { 
     echo '<div><img class="i" src="./'.$image.'" ></div>'; 
     } 
     ?> 
    </div> 
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
    <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     function sliderInit(){ 
     $('.your-class').not('.slick-initialized').slick({ 
      slidesToShow: 1, 
      infinite: true, 
      slidesToScroll: 1, 
      autoplay: true, 
      pauseOnHover:true, 
      autoplaySpeed: <?php echo trim($data); ?> 
     }); 

     }; 
     /*function for full size*/ 
     function toggleFullscreen(elem) { 
     elem = elem || document.documentElement; 
     if (!document.fullscreenElement && !document.mozFullScreenElement && 
      !document.webkitFullscreenElement && !document.msFullscreenElement) { 

      /*$('.your-class').slick('slickPlay');*/ 
      sliderInit(); 

      if (elem.requestFullscreen) { 
       elem.requestFullscreen(); 
      } else if (elem.msRequestFullscreen) { 
       elem.msRequestFullscreen(); 
      } else if (elem.mozRequestFullScreen) { 
       elem.mozRequestFullScreen(); 
      } else if (elem.webkitRequestFullscreen) { 
       elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
      } 

      } else { 
      sliderInit(); 
      /* $('.your-class').slick('slickPlay');*/ 
      if (document.exitFullscreen) { 
       document.exitFullscreen(); 
      } else if (document.msExitFullscreen) { 
       document.msExitFullscreen(); 
      } else if (document.mozCancelFullScreen) { 
       document.mozCancelFullScreen(); 
      } else if (document.webkitExitFullscreen) { 
       document.webkitExitFullscreen(); 
      } 
      } 
     } 
     /*call function full size when click on img*/ 
     document.getElementById('exampleImage').addEventListener('click', function() { 
      toggleFullscreen(); 
     }); 

     /*check if there is any change on img myabe add more or delete*/ 
     setInterval(adddata, 20*1000); 
     function adddata(){ 

      $.ajax({ 
      url :"adddata.php", 
      success:function(data){ 
       $('#exampleImage').html(data); 


       setInterval(sliderInit, 1000); 
       $('.your-class').slick('slickPlay'); 
      } 
      }) 
     } 

     }); 
     </script> 
    </body> 
    </html>

출처

2017-12-15 Tsohar Zigdon

당신은 귀하의 콘텐츠를 추가하거나 교체하려는 모든 슬라이드를 제거 .slick("slickRemove")를 사용 .slick("unslick") 필요하고 .slick("slickAdd")은 새로운 것을 추가 할 수 있습니다.

출처

2017-12-15 13:39:51

ty 아주 많이 그 작품 좋은 하루 –

동적 변경 후 매끄러운 슬라이더가 작동하지 않습니다.

답변

관련 문제