2 slick carousel init 方法的问题答案

【问题标题】：Problem with 2 slick carousel init method2 slick carousel init 方法的问题
【发布时间】：2020-09-23 20:25:09
【问题描述】：

我正在使用 slick.js 在同一页面上处理具有 2 个滑块的页面。第一个滑块是页面的主要顶部横幅，第二个是一个弹出窗口，用于显示产品图像和其余信息。此外，我使用 .NET CORE MVC，所以我决定使用部分视图来显示弹出产品详细信息。所以。问题是第二个滑块不能正常工作。

Uncaught TypeError: Cannot read property 'add' of null
    at Object.e.initADA (<anonymous>:1:19335)
    at Object.e.init (<anonymous>:1:19101)
    at new <anonymous> (<anonymous>:1:2832)
    at r.fn.init.i.fn.slick (<anonymous>:1:42781)
    at HTMLDivElement.<anonymous> (<anonymous>:43:23)
    at Function.each (<anonymous>:2:2715)
    at r.fn.init.each (<anonymous>:2:1003)
    at <anonymous>:9:27
    at <anonymous>:170:3
    at p (jquery-3.2.1.min.js:2)

我有以下代码

布局

<html lang="en">
<head>
    <link rel="icon" type="image/png" href="~/images/icons/favicon.png" />
    <link rel="stylesheet" type="text/css" href="/lib/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/lib/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--Other css links-->
    <link rel="stylesheet" type="text/css" href="/lib/vendor/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <!-- Header -->
    <header class="header-v3">
        <!-- Logo store-->
    </header>
    <!-- Sidebar -->
    <!-- Right menu -->

    @RenderBody();

    <!-- Modal Details-->
    <div id="divModalDetails">
    </div>
    <!-- Footer -->
    <!--Other js libraries-->
    <script src="/lib/vendor/slick/slick.min.js"></script>
    <script src="js/slick-custom.js"></script>
    <!--other scripts-->
    <script src="js/main.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

索引

@model Website.Models.IndexViewModel
@{
    ViewData["Title"] = "Home Page";
}

<!-- Slider -->
<<section class="section-slide">
    <div class="wrap-slick1 rs2-slick1">
        <div class="slick1">
            <div class="item-slick1 bg-overlay1" style="background-image: url(images/slide-05.jpg);" data-thumb="images/thumb-01.jpg" data-caption="Women’s Wear">
                <div class="container h-full">
                    <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
                            <span class="ltext-202 txt-center cl0 respon2">Women Collection 2021</span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                            <h2 class="ltext-104 txt-center cl0 p-t-22 p-b-40 respon1">New arrivals</h2>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                            <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">Shop Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-slick1-dots p-lr-10"></div>
    </div>
</section>

<!-- Products -->
<section class="bg0 p-t-23 p-b-130">
    <div class="container">
        <div class="p-b-10">
            <h3 class="ltext-103 cl5">
                Product List
            </h3>
        </div>
        <!--List of products with a button in each one to display pop-up details-->
        <!--example of "Quick View" button-->
        <a href="#" onclick="showDetailsModal(@item.id, event)" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
            Quick View
        </a>
    </div>
</section>

@Html.Hidden("urlDetails", Url.Action("Details", "Home"))

模态弹出窗口

@model Website.Models.ProductoView
@{
    Layout = null;
}

<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
    <div class="overlay-modal1 js-hide-modal1"></div>
    <div class="container">
        <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
            <button class="how-pos3 hov3 trans-04 js-hide-modal1">
                <img src="images/icons/icon-close.png" alt="CLOSE">
            </button>

            <div class="row">
                <div class="col-md-6 col-lg-7 p-b-30">
                    <div class="p-l-25 p-r-30 p-lr-0-lg">
                        <div class="wrap-slick3 flex-sb flex-w">
                            <div class="wrap-slick3-dots"></div>
                            <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
                            <div class="slick3 gallery-lb">
                                @{
                                    for (int i = 0; i < Model.images.Count(); i++)
                                    {
                                        <div class="item-slick3" data-thumb="@Url.Content(Model.images[i])">
                                            <div class="wrap-pic-w pos-relative">
                                                <img src="@Url.Content(Model.images[i])" alt="IMG-PRODUCT">

                                                <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="@Url.Content(Model.images[i])">
                                                    <i class="fa fa-expand"></i>
                                                </a>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                    </div>
                    <!--Rest of the product info-->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/lib/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/lib/vendor/slick/slick.min.js"></script>
<script src="js/slick-custom.js"></script>
<script>
    $('.gallery-lb').each(function () { // the containers for all galleries
        $(this).magnificPopup({
            delegate: 'a', // the selector for gallery item
            type: 'image',
            gallery: {
                enabled: true
            },
            mainClass: 'mfp-fade'
        });
    });
</script>
<script src="js/main.js"></script>

js 流畅控制

(function ($) {
    // USE STRICT
    "use strict";

        /*==================================================================
        [ Slick1 ]*/
        $('.wrap-slick1').each(function(){
            var wrapSlick1 = $(this);
            var slick1 = $(this).find('.slick1');


            var itemSlick1 = $(slick1).find('.item-slick1');
            var layerSlick1 = $(slick1).find('.layer-slick1');
            var actionSlick1 = [];
            

            $(slick1).on('init', function(){
                var layerCurrentItem = $(itemSlick1[0]).find('.layer-slick1');

                for(var i=0; i<actionSlick1.length; i++) {
                    clearTimeout(actionSlick1[i]);
                }

                $(layerSlick1).each(function(){
                    $(this).removeClass($(this).data('appear') + ' visible-true');
                });

                for(var i=0; i<layerCurrentItem.length; i++) {
                    actionSlick1[i] = setTimeout(function(index) {
                        $(layerCurrentItem[index]).addClass($(layerCurrentItem[index]).data('appear') + ' visible-true');
                    },$(layerCurrentItem[i]).data('delay'),i); 
                }        
            });


            var showDot = false;
            if($(wrapSlick1).find('.wrap-slick1-dots').length > 0) {
                showDot = true;
            }

            $(slick1).slick({
                pauseOnFocus: false,
                pauseOnHover: false,
                slidesToShow: 1,
                slidesToScroll: 1,
                fade: true,
                speed: 1000,
                infinite: true,
                autoplay: true,
                autoplaySpeed: 6000,
                arrows: true,
                appendArrows: $(wrapSlick1),
                prevArrow:'<button class="arrow-slick1 prev-slick1"><i class="zmdi zmdi-caret-left"></i></button>',
                nextArrow:'<button class="arrow-slick1 next-slick1"><i class="zmdi zmdi-caret-right"></i></button>',
                dots: showDot,
                appendDots: $(wrapSlick1).find('.wrap-slick1-dots'),
                dotsClass:'slick1-dots',
                customPaging: function(slick, index) {
                    var linkThumb = $(slick.$slides[index]).data('thumb');
                    var caption = $(slick.$slides[index]).data('caption');
                    return  '<img src="' + linkThumb + '">' +
                            '<span class="caption-dots-slick1">' + caption + '</span>';
                },
            });

            $(slick1).on('afterChange', function(event, slick, currentSlide){ 

                var layerCurrentItem = $(itemSlick1[currentSlide]).find('.layer-slick1');

                for(var i=0; i<actionSlick1.length; i++) {
                    clearTimeout(actionSlick1[i]);
                }

                $(layerSlick1).each(function(){
                    $(this).removeClass($(this).data('appear') + ' visible-true');
                });

                for(var i=0; i<layerCurrentItem.length; i++) {
                    actionSlick1[i] = setTimeout(function(index) {
                        $(layerCurrentItem[index]).addClass($(layerCurrentItem[index]).data('appear') + ' visible-true');
                    },$(layerCurrentItem[i]).data('delay'),i); 
                }
                         
            });

        });
        
        /*==================================================================
        [ Slick3 ]*/
        $('.wrap-slick3').each(function () {
            $(this).find('.slick3').not('.slick3-initialized').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                fade: true,
                infinite: true,
                autoplay: false,
                autoplaySpeed: 6000,

                arrows: true,
                appendArrows: $(this).find('.wrap-slick3-arrows'),
                prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
                nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',

                dots: true,
                appendDots: $(this).find('.wrap-slick3-dots'),
                dotsClass:'slick3-dots',
                customPaging: function(slick, index) {
                    var portrait = $(slick.$slides[index]).data('thumb');
                    return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
                },  
            });
        });
            
                

})(jQuery);

据我所知，问题是因为滑块容器被初始化了两次，所以我尝试使用 $(this).find('.slick3').not('.slick3-initialized') 但不起作用。

抱歉这个问题太长了，但我认为这是必要的。

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-core-mvc slick.js

【解决方案1】：

这是一个演示如何在模态中使用幻灯片（模态来自局部视图）：

产品视图：

public class ProductoView
    {
        public List<string> images { get; set; }
    }

控制器：

public class TestSlickController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult TestPartialView()
        {
            ProductoView p = new ProductoView();
            p.images = new List<string> { "~/images/green.PNG", "~/images/red.PNG", "~/images/yellow.PNG" };
            return PartialView("Partial",p);
        }
    }

索引：

<h1>Index</h1>
<div class="slickdemo1">
    <div class="holder">your content1</div>
    <div class="holder">your content2</div>
    <div class="holder">your content3</div>
</div>
<div id="testmodal" style="width:500px">
</div>

<button onclick="showDetailsModal()">click</button>
@section scripts{
    <script>
        $(function () {
            $('.slickdemo1').slick({
                infinite: true,
                arrows: true
            });
        })
        function showDetailsModal() {
            //using get to display the modal in the parent view div
            $.get("/TestSlick/TestPartialView", function (data) {
                $('#testmodal').html(data);
                
                $('#exampleModalCenter').modal('show');
                $('.slickdemo').slick({
                    infinite: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
                });
                $('#btnClose').on('click', function () {
                    $('#exampleModalCenter').modal('toggle');
                });      
            })

        }
    </script>
}
<style>
    .holder {
        height: 150px;
        background: gray;
        border: 1px dashed #000;
        color: #fff;
        text-align: center;
    }
</style>

部分：

<div class="modal fade" id="exampleModalCenter" role="dialog">

        <div class="container">
            <div class="row">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4>Show</h4>
                        </div>
                        <div class="modal-body" style="width:500px">
                            Here is a slick
                            <div class="slickdemo">
                                @for (int i = 0; i < Model.images.Count(); i++)
                                {
                                    <div class="holder"><img src="@Url.Content(Model.images[i])"></div>
                                }
                                
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button id="btnClose">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

结果：

【讨论】：