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种产品，并且每个滑块都有span class =“ featured-all”，这是我要用于新div的链接，该链接将添加到每个滑块的末尾，这样当客户滚动到滑块的末尾时，他们可以获得最后一个滑块的内容，例如“全部购买”。

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

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

谢谢！

Answer 1

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

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

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

1 个答案: