Javascript 滑动条使用url在每个滑动条的末尾添加新的div

我有一个页面，我在其中显示多个滑块的产品从其类别；目标是在每个滑块的末尾添加一个额外的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>

.item{宽度：33%；显示：内联块；}
.slick-prev，.slick-next{top:-15px；z-index:999999；}
.slick prev{左：575px；}
.slick next{右：575px；}
.designer标题{页边距底部：1.3em；}
新移民
{{block type=“catalog/product\u list”limit=“6”category\u id=“1451”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“1452”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“257”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“260”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“1831”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“248”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“240”template=“catalog/product/list custom.phtml”}
{{block type=“catalog/product\u list”limit=“6”category\u id=“1773”template=“catalog/product/list custom.phtml”}
jQuery（文档）.ready（函数（）{
var gridContainer=jQuery（'.products-grid'）；
光滑的({
添加：'测试'，
幻灯片放映：3，
幻灯片滚动：2，
自动播放：错误，
自动播放速度：2000，
点：是的，
箭头：是的，
响应：[
{
断点：768，
设置：{
箭头：错，
幻灯片滚动：1，
幻灯片放映：3
}
},
{
断点：480，
设置：{
箭头：错，
幻灯片滚动：1，
幻灯片放映：1
}
}
]
});
});

因此，正如您所看到的，有一个动态块从每个类别中提取6种产品，每个滑块都有span class=“featured all”，这是我希望用于新div的链接，该链接将添加到每个滑块的末尾，以便当客户滚动到滑块的末尾时，他们可以获得最后一个滑块内容，例如Shop all

我曾尝试将slickAdd选项添加到slick slider中，但由于某些原因，它不起作用，没有添加div，而且在dom中也没有看到它

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

---

提前谢谢

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

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

---

你能制作JSFIDLE吗？html中的

.products网格
在哪里？指向参考网站dev.oaknyc.com的url和JSFIDLE:@AnujKhandelwal