光滑的滑块将新的 div 添加到带有 url 的每个滑块的末尾

Question

我有一个页面，其中显示了多个滑块，其中包含其类别中的产品；目标是在每个滑块的末尾添加一个额外的 div，该滑块将链接到相应的类别。

这是我所拥有的：

    <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>

如您所见，有一个动态块从每个类别中提取 6 个产品，每个滑块的跨度为 class="featured-all"，这是我想用于新 div 的链接，该链接将添加到每个滑块的末尾，这样当客户滚动到滑块的末尾时，他们会获得最后一个滑块内容，例如 Shop All。

我尝试将 slickAdd 选项添加到 slick 滑块，但由于某种原因它不起作用，没有添加 div，我也没有在 dom 中看到它。

我希望这能解释我的滑块问题。

提前致谢！

Answer 1

您可以尝试使用 Slick 的“init”事件并在初始化后手动创建和附加 div：

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