bxSlider with thumbnails carousel

thumbnail-carousel.bxslider.html

<div class="slideshow">
    <ul class="bxslider">
        {% for image in images %}
            <li><img src="{{image.url}}" alt=""></li>
        {% endfor %}
    </ul>
    <div class="gallery-thumbs-container">
        <ul id="gallery-thumbs" class="gallery-thumbs-list">
            {% for image in images %}
            <li class="thumb-item">
                <div class="thumb">
                    <a href=""><img src="{{image.thumb_url}}" alt=""></a>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

thumbnail-carousel.bxslider.js

if ($('.bxslider img').length > 0) {
    
    // Cache the thumb selector for speed
    var thumb = $('#gallery-thumbs').find('.thumb');
    
    // How many thumbs do you want to show & scroll by
    var visibleThumbs = 8;

    // Put slider into variable to use public functions
    var gallerySlider = $('.bxslider').bxSlider({
        controls: true,
        pager: false,
        easing: 'easeInOutQuint',
        infiniteLoop: false,
        speed: 500,
        nextText: '>',
        prevText: '<',

        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
            thumb.removeClass('pager-active');
            thumb.eq(newIndex).addClass('pager-active');
            // Action next carousel slide on one before the end, so newIndex + 1
            slideThumbs(newIndex + 1, visibleThumbs);
        }
    });

    // When clicking a thumb
    thumb.click(function (e) {

        // -6 as BX slider clones a bunch of elements
        gallerySlider.goToSlide($(this).closest('.thumb-item').index());

        // Prevent default click behaviour
        e.preventDefault();
    });

    // Function to calculate which slide to move the thumbs to
    function slideThumbs(currentSlideNumber, visibleThumbs) {
        
        // Calculate the first number and ignore the remainder
        var m = Math.floor(currentSlideNumber / visibleThumbs);
        // Multiply by the number of visible slides to calculate the exact slide we need to move to
        var slideTo = m;

        // Tell the slider to move
        thumbsSlider.goToSlide(slideTo);
    }

    // When you click on a thumb
    $('#gallery-thumbs').find('.thumb').click(function () {

        // Remove the active class from all thumbs
        $('#gallery-thumbs').find('.thumb').removeClass('pager-active');

        // Add the active class to the clicked thumb
        $(this).addClass('pager-active');

    });

    // Thumbnail slider
    var thumbsSlider = $('#gallery-thumbs').bxSlider({
        controls: false,
        pager: false,
        easing: 'easeInOutQuint',
        //displaySlideQty: visibleThumbs,
        //moveSlideQty: visibleThumbs,
        infiniteLoop: false,
        slideWidth: 100,
        minSlides: visibleThumbs,
        maxSlides: visibleThumbs,
        slideMargin: 10
    });

}