Container changes

Hi,

Those tiles are managed by jQuery Slick. The code managing it is located in customer-area/skins/frontend/master/assets/js/main.js, line 584:

// Responsive JS Slider
                if ($.isFunction($.fn.slick)) {
                    var slickSlider = $('.cuar-js-slick-responsive', $wrapperJS);
                    if (slickSlider.length) {
                        var slickSlidesCount = slickSlider.find('.cuar-js-slick-slide-item').length;
                        slickSlider.slick({
                            autoplay: false,
                            centerMode: true,
                            respondTo: 'slider',
                            adaptiveHeight: false,
                            speed: 300,
                            arrows: true,
                            slidesToShow: (slickSlidesCount < 4 ? slickSlidesCount : 4),
                            slidesToScroll: (slickSlidesCount < 4 ? slickSlidesCount : 4),
                            responsive: [{
                                breakpoint: 1024,
                                settings: {
                                    slidesToShow: (slickSlidesCount < 3 ? 2 : 3),
                                    slidesToScroll: (slickSlidesCount < 3 ? 2 : 3),
                                    infinite: true,
                                    dots: true
                                }
                            }, {
                                breakpoint: 880,
                                settings: {
                                    slidesToShow: (slickSlidesCount < 2 ? 1 : 2),
                                    slidesToScroll: (slickSlidesCount < 2 ? 1 : 2)
                                }
                            }, {
                                breakpoint: 480,
                                settings: {
                                    slidesToShow: 1,
                                    slidesToScroll: 1
                                }
                            }]
                        });
                    }
                }

Basically, you would need to :
– Create a custom WP Plugin
– Add a JS file including this code you customized and load it on WPCA single posts
– Copy/edit the template containing the slider HTML (do not hesitate to ask if you don’t have access to the template system documentation, since our site is actually off) and change cuar-js-slick-responsive to something you customize like custom-cuar-js-slick-responsive. That way, you can bind your own function to the slider, and map your own parameters for each screen size.

Best regards.

• This reply was modified 5 years, 2 months ago by Thomas.