Two two product carousels side by side

[lesliekirk]

Following to my previous post of More than one carousel on the SFNT I would like to place these two carousels side by side with only two products instead of the four. I've used CSS to create the small boxes that display side by side but the boxes still display four products just much smaller. I'm going to take a peek at the javascript again but if anyone else has tried to do this, I would love to hear about it.

Many thanks!
Leslie

[rajnishsi]

Re: Two two product carousels side by side

In your site's scripts.js file, there is a block of code :

// ---- Product Carousels ---- //
productsCarousels: function (carousel, append) {
    var carousel = $(carousel);
    if (append === true) {
        var appendArrowsTo = $(carousel.selector).parent();
    }
    else if (append === 'undefined') {
        var appendArrowsTo = $(carousel.selector);
    };
    $.ajax({
        cache: true,
        crossDomain: true,
        dataType: 'script',
        url: '../js/jquery.slick.min.js'
    }).done(function () {
        carousel.slick({
            appendArrows: appendArrowsTo,
            draggable: false,
            slidesToScroll: 4,
            slidesToShow: 4,
            responsive: [
                {
                    breakpoint: 1040,
                    settings: {
                        slidesToScroll: 3,
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 800,
                    settings: {
                        slidesToScroll: 2,
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 512,
                    settings: {
                        slidesToScroll: 1,
                        slidesToShow: 1
                    }
                }
            ]
        });
    });
},

You'll need to change parameters "slidesToScroll" and "slidesToShow" to get the 2 image sliders. Adjust them for default and responsive layouts, their names are pretty self-explanatory. On a side not, It will take effect over all the site sliders.

[lesliekirk]

Re: Two two product carousels side by side

Thanks - I'm going to think on this a bit more. I figured it was going to be something in the javascript. I'm not to thrilled with this change affecting all of the sliders. I need more flexibility. Might have to make this a Wish Lish item - have the ability to select the number of products in the slide.

I've also got to go back through my CSS tweaks, I think I may have done something that is impacting the Related Products display.

It's like squeezing a balloon...