Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason Espin 368 posts 1335 karma points
    Oct 13, 2014 @ 13:34
    Jason Espin
    0

    JQuery carousel with Slimsy

    Hi Jeavon,

    Great package and thankyou for taking the time to implement it. The one problem I have is that it doesn't integrate very well with the Bootstrap carousel.

    By default, Bootstrap carousel items have a display value of none. It is only when the items are assigned a class of 'active' that they are given a display value of block.

    As is typical with a carousel, my first item has the active class applied and this is working with Slimsy just fine however the remainder of the images are all appearing really small. I assumed that this was because of this difference in css display property.

    I therefore assigned all carousel items the class of 'active' on page load and take this class away using the following Javascript:

    window.slimmage.readyCallback = function() {
        $('.item.active').removeClass('active');
        $('.item.first').addClass('active');
    }
    

    It's rather clumsy code but it works in ensuring that all images are scaled correctly initially. My only problem now is when I resize my screen, the items that do not have the active class on at the time are not resized.

    Is there any way you can see of adding the active class back onto the carousel images before the slimsy resize detection script runs?

  • Jason Espin 368 posts 1335 karma points
    Oct 13, 2014 @ 13:35
    Jason Espin
    0

    Sorry. After some dabbling I have found that the following seems to work:

    window.slimmage.readyCallback = function () {
        $('.carousel-inner').find('.item:not(.first)').each(function () {
            $(this).removeClass('active');
        })
    }
    
    $(window).resize(function () {
        $('.carousel-inner').find('.item').each(function(){
            $(this).addClass('active');
        })
        $('.carousel-inner').find('.item:not(.first)').each(function () {
            $(this).removeClass('active');
        })
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft