JSFiddle - React, Tailwind, and code Playground

by gmoulin

HTML

<div class="img-list">
    <img src="" alt="1" />
    <img src="" alt="2" />
    <img src="" alt="3" />
    <img src="" alt="4" />
    <img src="" alt="5" />
    <img src="" alt="6" />
    <img src="" alt="7" />
    <img src="" alt="8" />
    <img src="" alt="9" />
    <img src="" alt="10" />
    <img src="" alt="11" />
    <img src="" alt="12" />
    <img src="" alt="13" />
    <img src="" alt="14" />
    <img src="" alt="15" />
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

JavaScript

var start = 0;
    var nb = 5;
    var end = start + nb;
    var length = $('.img-list img').length;
    var list = $('.img-list img');
    
    list.hide().filter(':lt('+(end)+')').show();
    
    
    $('.prev, .next').click(function(e){
       e.preventDefault();
       console.log(start);
       if( $(this).hasClass('prev') ){
           start -= nb;
       } else {
           start += nb;
       }
        
       if( start < 0 || start >= length ) start = 0;
       end = start + nb;        
       console.log(start);
       console.log(end);
       
       if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
       else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
    });