Le carrousel lisse en carte de maçonnerie à défilement infini fonctionne avec la première charge, mais les carrousels ne fonctionnent pas sur les nouveaux éléments.

Question

Voici le script pour carrousel lisse.

function slider() { 

     var $arrows = $('.arrows'); 
      var $next = $arrows.children(".slick-next");  
      var $prev = $arrows.children(".slick-prev"); 

      var slick = $('.your-class').slick({ 
       appendArrows: $arrows 
      }); 

      $('.slick-next').on('click', function (e) { 
       var i = $next.index(this) 
       console.log("i", i); 

       slick.eq(i).slickNext(); 

      }); 
      $('.slick-prev').on('click', function (e) { 
       var i = $prev.index(this) 
       slick.eq(i).slickPrev(); 
      }); 
    }; 

    $(document).ready(function(){ 
     slider(); 
    }) 
</script> 

ci-dessous est le script pour la maçonnerie de défilement infini

<script> 
$(window).load(function(){ 

    var $container = $('#rowmasonry'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.itemmasonry', 
      fitWidth: true, 
      gutter: 0, 

     }); 
    }); 



    $container.infinitescroll({ 
    navSelector : '#page-nav',  
    nextSelector : '#page-nav a', 
    itemSelector : '.itemmasonry', 
    negativeMargin: 250, 
    loading: { 
    finishedMsg: 'No more pages to load.', 
    img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    function(newElements) { 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     $newElems.imagesLoaded(function(){ 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 

    }); 

}); 

</script> 

J'utilise ces scripts en php. Je suppose que la maçonnerie de parchemin infinie devrait être détruite et ré-initiée comme charge suivante.

Answer 1

Essayez d'appeler slider(); dans votre fonction de rappel infinitescroll:

$(window).load(function(){ 

var $container = $('#rowmasonry'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.itemmasonry', 
     fitWidth: true, 
     gutter: 0, 

    }); 
}); 

$container.infinitescroll({ 
navSelector : '#page-nav',  
nextSelector : '#page-nav a', 
itemSelector : '.itemmasonry', 
negativeMargin: 250, 
loading: { 
finishedMsg: 'No more pages to load.', 
img: 'http://i.imgur.com/6RMhx.gif' 
} 
}, 
function(newElements) { 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 

slider(); 

}); 

});