Using the Slick Slider in the Global Footer

[lesliekirk]

What is going to be the proper way to get the slick slider to fire in the Global Footer? It would seem that the javascript is somewhat page code dependent. For example, I have been able to get more than one of the slick slider carousels to fire on the PROD page by creating a new div ID, then copy and editing it as needed. Here is an example of what I added to jsBASK: function

// ---- Other Shoppers Product Carousel ---- //


        $.ajax({

            cache: true,

            crossDomain: true,

            dataType: 'script',

            url: theme_path + '/js/jquery.slick.min.js'

        }).done(function () {

$('#js-othershoppers-products-carousel').slick({

                appendArrows: $('#js-othershoppers-products-carousel').prev('.h3'),

                draggable: false,

                slidesToScroll: 8,

                slidesToShow: 8,

                    responsive: [

                        {

                            breakpoint: 608,

                            settings: {

                                appendArrows: $('#js-othershoppers-products-carousel'),

                                slidesToScroll: 1,

                                slidesToShow: 1

                            }

                        }

                    ]

            });


});

Is having this also in the jsPROD: function the reason it won't fire? How can I made this not dependent upon a Page? My javascript foo is very weak.

[Matt Zimmermann]

Hi Leslie,

If you place that function within the 'init' function of the scripts.js file, it will be accessible globally.

[lesliekirk]

Hi Leslie,

If you place that function within the 'init' function of the scripts.js file, it will be accessible globally.

Well, I have a vague idea of what you are referring to. So do I add the entire snippet that I posted? And about where should I added it within the "init" function? Line?

[Matt Zimmermann]

You should be able to use that entire snippet. As for placement, that can be a little tricky as it depends on the ReadyTheme you are using. Within the 'init' function, you should see a function to create the 'main' element. Try pasting your snippet below that.

[lesliekirk]

Ummm...Suivant...

[Matt Zimmermann]

If it's out-of-the-box Suivant, you should be able to add it at line 84.