Slick slider add new div to the end of each slider with url

Question

I have a page where I display multiple sliders with products from its categories; goal is to add one extra div to the end of each slider that will link to corresponding category.

Here is what I have:

    <style>
      .item {width: 33%; display: inline-block;}
      .slick-prev, .slick-next{top: -15px; z-index:999999;}
      .slick-prev{left: 575px;}
      .slick-next{right: 575px;}
      .designer-title{margin-bottom:1.3em;}
    </style>


    <h1 class="designer-title">NEW ARRIVALS</h1>

    <div class="tops slicker">
    <h2 class="featured-title"><a href="{{store url='men/tops.html'}}">Tops</a></h2>
    <span class="featured-all"><a href="{{store url='men/tops.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="1451" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="bottoms slicker">
    <h2 class="featured-title"><a href="{{store url='men/bottoms.html'}}">Bottoms</a></h2>
    <span class="featured-all"><a href="{{store url='men/bottoms.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="1452" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="outerwear slicker">
    <h2 class="featured-title"><a href="{{store url='men/outerwear.html'}}">Outerwear</a></h2>
    <span class="featured-all"><a href="{{store url='men/outerwear.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="257" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="shoes slicker">
    <h2 class="featured-title"><a href="{{store url='men/shoes.html'}}">Shoes</a></h2>
    <span class="featured-all"><a href="{{store url='men/shoes.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="260" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="swim slicker">
    <h2 class="featured-title"><a href="{{store url='men/swim.html'}}">Swim</a></h2>
    <span class="featured-all"><a href="{{store url='men/swim.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="1831" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="sunglasses slicker">
    <h2 class="featured-title"><a href="{{store url='men/sunglasses.html'}}">Sunglasses</a></h2>
    <span class="featured-all"><a href="{{store url='men/sunglasses.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="248" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="accessories slicker">
    <h2 class="featured-title"><a href="{{store url='men/accessories.html'}}">Accessories</a></h2>
    <span class="featured-all"><a href="{{store url='men/accessories.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="240" template="catalog/product/list-custom.phtml"}}
    </div>

    <div class="sale slicker">
    <h2 class="featured-title"><a href="{{store url='men/sale.html'}}">Sale</a></h2>
    <span class="featured-all"><a href="{{store url='men/sale.html'}}">See All</a></span>
    {{block type="catalog/product_list" limit="6" category_id="1773" template="catalog/product/list-custom.phtml"}}
    </div>

    <script>
        jQuery(document).ready(function(){
            var gridContainer = jQuery('.products-grid');
            gridContainer.slick({
                slickAdd:'<div>test</div>',
                slidesToShow: 3,
                slidesToScroll: 2,
                autoplay: false,
                autoplaySpeed: 2000,
                dots: true,
                arrows: true,
                    responsive: [
                    {
                    breakpoint: 768,
                    settings: {
                        arrows: false,
                        slidesToScroll: 1,
                        slidesToShow: 3
                    }
                    },
                    {
                    breakpoint: 480,
                    settings: {
                        arrows: false,
                        slidesToScroll: 1,
                        slidesToShow: 1
                    }
                    }
                ]
            });
        });
    </script>

So as you can see there is a dynamic block that pulls in 6 products from each category and each slider has span class="featured-all" which is the link I would like to use for new div which will be added to the end of each slider so that when customer scrolls to the end of slider they get last slider content as Shop All for instance.

I have tried adding slickAdd option to slick slider and for some reason it doesn't work, div is not added and I dont see it in dom either.

I hope this explains my problem with slider.

Thanks in advance!

Answer 1

You could possibly try to use Slick's "init" event and manually create and append the div after initialization:

$(gridContainer).on("init", function(){
    //manually create element and append
});