# Jquery infinite scroll

**URL:** <https://forum.getkirby.com/t/jquery-infinite-scroll/5330>\
**Category:** Questions\
**Tags:** v2\
**Created:** [September 25, 2016, 8:58pm UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330 "2016-09-25T20:58:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![katialove](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@katialove](https://forum.getkirby.com/u/katialove)\
**Post date:** [September 25, 2016, 8:58pm UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/1 "2016-09-25T20:58:20Z")

</div>

I’m trying to implement infinite scroll on the website page that is going to have 20 slideshows.  
I was planning to use waypoint libraries [Infinite Scroll • Waypoints](http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/)

```
<?php snippet('header') ?>

  <main class="home">

<div id="container"> 
    <div class="slideshow1 infinite-item post">
      <ul class="bxslider1">
	  	<?php foreach($page->gallery1()->yaml() as $image): ?>
	       <?php if($img = $page->image($image)): ?>
        <li>
         <img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
         
        </li>
	      <?php endif ?>
	    <?php endforeach ?>
        
      </ul>
	  <div class="outside">
	    <p><a href="" id="prev1">Prev/</a>
			<a href="" id="next1">Next</a></p>
	  </div>
	  
	  <div class="description" style="display: none;"><?php echo $page->caption1()->kirbytext() ?></div>
 </div>
    <div class="slideshow2 infinite-item post">
 <ul class="bxslider2">
	 	  	<?php foreach($page->gallery2()->yaml() as $image): ?>
	       <?php if($img = $page->image($image)): ?>
        <li>
         <img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" /></li>
	      <?php endif ?>
	    <?php endforeach ?>
        
      </ul>
	  <div class="outside1">
	    <p><a href="" id="prev2">Prev/</a>
			<a href="" id="next2">Next</a></p>
	  </div>
  <div class="description" style="display: none;"><?php echo $page->caption2()->kirbytext() ?></div>        
  
</div>

    <div class="slideshow3 infinite-item post">
      <ul class="bxslider3">
	  	<?php foreach($page->gallery3()->yaml() as $image): ?>
	       <?php if($img = $page->image($image)): ?>
        <li>
         <img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
         
        </li>
	      <?php endif ?>
	    <?php endforeach ?>
        
      </ul>
	  <div class="outside3">
	    <p><a href="" id="prev3">Prev/</a>
			<a href="" id="next3">Next</a></p>
	  </div>
	  
	  <div class="description" style="display: none;"><?php echo $page->caption3()->kirbytext() ?></div>
 </div>
	
    <div class="slideshow4 infinite-item post">
 <ul class="bxslider4">
	 	  	<?php foreach($page->gallery4()->yaml() as $image): ?>
	       <?php if($img = $page->image($image)): ?>
        <li>
         <img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" /></li>
	      <?php endif ?>
	    <?php endforeach ?>
        
      </ul>
	  <div class="outside4">
	    <p><a href="" id="prev4">Prev/</a>
			<a href="" id="next4">Next</a></p>
	  </div>
  <div class="description" style="display: none;"><?php echo $page->caption4()->kirbytext() ?></div>        
  
</div>

</div>
 <div id='date'></div>
	      

  </main>

<?php snippet('footer') ?> 

```

I’d love each slideshow div to load on scroll?  
I did everything according to their tutorial but never got the result.

my header with script looks like this:

```
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
      <meta name="description" content="<?php echo $site->description()->html() ?>">
      <meta name="keywords" content="<?php echo $site->keywords()->html() ?>">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      
     <?php echo js('assets/js/jquery.bxslider.min.js') ?>
     <?php echo js('assets/js/jquery.waypoints.min.js') ?>
     <?php echo js('assets/js/jquery.lazy.min.js') ?>
      <?php echo css('assets/css/jquery.bxslider.css') ?>
     <?php echo css('assets/css/main.css') ?>

    <script>
  $(function () {
     var infinite = new Waypoint.Infinite({
       element: $('.infinite-container')[0]
     })
        // Slideshow 1
    	  var slider1 = $('.bxslider1').bxSlider({
    		  pager: true,
    		  pagerType: 'short',
    adaptiveHeight: true,
      mode: 'fade'
    	  });

    	  $('#next1').click(function(){
    	    slider1.goToNextSlide();
    	    return false;
    	  });

    	  $('#1prev1').click(function(){
    	    slider1.goToPrevSlide();
    	    return false;
    	  });
    	  
    	  // Slideshow 2
    	  var slider2 = $('.bxslider2').bxSlider({
    		  pager: true,
    		  pagerType: 'short',
    adaptiveHeight: true,
      mode: 'fade'
    	  });

    	  $('#next2').click(function(){
    	    slider2.goToNextSlide();
    	    return false;
    	  });

    	  $('#prev2').click(function(){
    	    slider2.goToPrevSlide();
    	    return false;
    	  });
    	  
    	  
    	  // Slideshow 3
    	  
    	  var slider3 = $('.bxslider3').bxSlider({
    		  pager: true,
    		  pagerType: 'short',
    adaptiveHeight: true,
      mode: 'fade'
    	  });

    	  $('#next3').click(function(){
    	    slider3.goToNextSlide();
    	    return false;
    	  });

    	  $('#prev3').click(function(){
    	    slider3.goToPrevSlide();
    	    return false;
    	  });
    	  
    	  
      // Slideshow 4
    	  var slider4 = $('.bxslider4').bxSlider({
    		  pager: true,
    		  pagerType: 'short',
    adaptiveHeight: true,
      mode: 'fade'
    	  });

    	  $('#next4').click(function(){
    	    slider4.goToNextSlide();
    	    return false;
    	  });

    	  $('#prev4').click(function(){
    	    slider4.goToPrevSlide();
    	    return false;
    	  });

      });
      
      
      $(function() {
        $(window).on("scroll resize", function() {
          var pos = $('#date').offset();
          $('.post').each(function() {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
              $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
              return; //break the loop
            }
          });
        });	

      });
      

    </script>

    </head>
    <body>

      <header class="header cf" role="banner">
          <div id="randomImage"><a class="logo" href="<?php echo url('home') ?>"> </a></div>
       
        <?php snippet('menu') ?>
      </header>

```

any advices?  
thanks in advance for any help

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 26, 2016, 8:29am UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/2 "2016-09-26T08:29:34Z")

</div>

According to the docs, you need to add this script:

```auto
<script src="/path/to/shortcuts/infinite.min.js"></script>

```

---

<div class="post-metadata">

**Author:** ![katialove](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@katialove](https://forum.getkirby.com/u/katialove)\
**Post date:** [September 26, 2016, 10:43am UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/3 "2016-09-26T10:43:43Z")

</div>

Thank you @texnixe  
Sorry, I have provided different file script.  
I have added it.  
still no luck.

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  
<?php echo js('assets/js/jquery.bxslider.min.js') ?>
 <?php echo js('assets/js/jquery.waypoints.min.js') ?>
 <?php echo js('assets/js/infinite.min.js') ?>
  <?php echo css('assets/css/jquery.bxslider.css') ?>
 <?php echo css('assets/css/main.css') ?>

<script>

  // You can also use "$(window).load(function() {"
  $(function () {

	  var infinite = new Waypoint.Infinite({
	    element: $('.infinite-container')[0]
	  })
 
    // Slideshow 1
	  var slider1 = $('.bxslider1').bxSlider({
		  pager: true,
		  pagerType: 'short',
adaptiveHeight: true,
  mode: 'fade'
	  });

	  $('#next1').click(function(){
	    slider1.goToNextSlide();
	    return false;
	  });

	  $('#1prev1').click(function(){
	    slider1.goToPrevSlide();
	    return false;
	  });
	  
	  // Slideshow 2
	  var slider2 = $('.bxslider2').bxSlider({
		  pager: true,
		  pagerType: 'short',
adaptiveHeight: true,
  mode: 'fade'
	  });

	  $('#next2').click(function(){
	    slider2.goToNextSlide();
	    return false;
	  });

	  $('#prev2').click(function(){
	    slider2.goToPrevSlide();
	    return false;
	  });
	  
	  
	  // Slideshow 3
	  
	  var slider3 = $('.bxslider3').bxSlider({
		  pager: true,
		  pagerType: 'short',
adaptiveHeight: true,
  mode: 'fade'
	  });

	  $('#next3').click(function(){
	    slider3.goToNextSlide();
	    return false;
	  });

	  $('#prev3').click(function(){
	    slider3.goToPrevSlide();
	    return false;
	  });
	  
	  
  // Slideshow 4
	  var slider4 = $('.bxslider4').bxSlider({
		  pager: true,
		  pagerType: 'short',
adaptiveHeight: true,
  mode: 'fade'
	  });

	  $('#next4').click(function(){
	    slider4.goToNextSlide();
	    return false;
	  });

	  $('#prev4').click(function(){
	    slider4.goToPrevSlide();
	    return false;
	  });
	  

  });
  
  
  $(function() {
    $(window).on("scroll resize", function() {
      var pos = $('#date').offset();
      $('.post').each(function() {
        if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
          $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
          return; //break the loop
        }
      });
    });	

  });
  

</script>
```

---

<div class="post-metadata">

**Author:** ![katialove](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@katialove](https://forum.getkirby.com/u/katialove)\
**Post date:** [September 26, 2016, 11:10am UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/4 "2016-09-26T11:10:18Z")

</div>

I don’t need to use this specific library. I wonder if there’s another kirby plugin that will allow me to load div as user scrolls down.

---

<div class="post-metadata">

**Author:** ![katialove](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@katialove](https://forum.getkirby.com/u/katialove)\
**Post date:** [September 26, 2016, 12:01pm UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/5 "2016-09-26T12:01:02Z")

</div>

I’m trying to implement lazy load [https://github.com/emn178/jquery-lazyload-any](https://github.com/emn178/jquery-lazyload-any)  
but it breaks sliders.  
I’m stuck here. I can’t find a good solution as I don’t want those 20 sliders on one page to load at the same time

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:55pm UTC](https://forum.getkirby.com/t/jquery-infinite-scroll/5330/6 "2025-02-06T16:55:09Z")

</div>


