When clicking on an image, the class="active" class is added to its link, as in JQuery, scrolling pictures in the id="bx-pager" block to the link with the active class

 #bx-pager { border:1px solid #000; height: 120px; overflow: hidden; width:370px; } 
 <div id="bx-pager"> <a data-slide-index="0" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="3" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="4" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="5" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="6" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="7" href=""><img src="http://placehold.it/120x120"/></a> </div>

    1 answer 1

    So?:

     $('a').on('click', function(e){ e.preventDefault(); if(!$(this).hasClass('active')){ $(this).addClass('active') .siblings() .removeClass('active'); } else { $(this).removeClass('active'); } $('#bx-pager').animate({ scrollLeft: $(this).offset().left }, 1000); }); 
     #bx-pager { border:1px solid #000; height: 120px; width:360px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* чтобы картинки стояли в одну линию, не переходя на другую строку */ word-wrap: normal; /* то же для IE */ } a { display: inline-block; border: 1px solid #ccc; } .active { border: 1px solid red; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <div id="bx-pager"> <a data-slide-index="0" href="" class="active"><img src="http://placehold.it/120x120"/></a> <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="3" href=""><img src="http://placehold.it/120x120"/></a> </div>

    Option 2:

     $('a').on('click', function(e){ e.preventDefault(); if(!$(this).hasClass('active')){ $(this).addClass('active') .siblings() .removeClass('active'); } else { $(this).removeClass('active'); } $('#bx-pager').animate({ scrollLeft: $(this).offset().left }, 1000); }); $('#bx-pager').animate({ scrollLeft: $('.active').offset().left }, 1000); 
     #bx-pager { border:1px solid #000; height: 120px; width:360px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* чтобы картинки стояли в одну линию, не переходя на другую строку */ word-wrap: normal; /* то же для IE */ } a { display: inline-block; border: 1px solid #ccc; } .active { border: 1px solid red; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <div id="bx-pager"> <a data-slide-index="0" href="" ><img src="http://placehold.it/120x120"/></a> <a data-slide-index="1" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="2" href=""><img src="http://placehold.it/120x120"/></a> <a data-slide-index="3" href="" class="active"><img src="http://placehold.it/120x120"/></a> </div>

    • Yes thank you. And then I started playing indentation. - Tokwiro
    • And how to make it work without a click, immediately when the page loads? - Tokwiro
    • @Tokwiro, added the second option - HamSter
    • The thing is that the link classes of the id = "bx-pager" block change without a click. I think to run your function on the other and that yours simply checks and scrolls. - Tokwiro