光滑的滑块图像仅在单击光滑箭头后加载答案

【问题标题】：slick's slider images load only after clicking a slick-arrow光滑的滑块图像仅在单击光滑箭头后加载
【发布时间】：2015-11-22 22:22:48
【问题描述】：

我正在尝试使用 slick 库来实现滑块同步。我有一组来自后端的名为pictures 的图像。我循环遍历这些图像以将它们填充到我的 slider-for 和 slider-nav div 下。

HTML 代码：

<head>
<style>

.slick-arrow {
    color: #666666;
    background: red;
}    
.slider-for {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}  
.slider-nav h1 {
    display: inline-block;
}
.slider-nav .slick-slide {
    text-align: center;
    width: 337px;
}
.container {
  margin-bottom: 5%;
  margin-top: 5%;
}    

</style>   
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css"/>
</head>
    <div class="container-fluid padding25">
      <h2>Pictures</h2>
          <div class="slider-for">
            <% var index = 0;%>
            <%_.each(pictures, function(picture) { %>

                <div>
                    <img src="<%=picture.pictureUrl%>" class="img-rounded" width="460" height="345"/>
                </div>
            <%
              index++;
              });
            %>
          </div>

            <div class="slider-nav">
                <%_.each(pictures, function(picture) { %>

                    <div>
                        <img src="<%=picture.pictureUrl%>" class="img-rounded" width="150" height="300"/>
                    </div>
                <%
                index++;
                });
                %>   
        </div> 

    <div class="row">
        <h2>Videos</h2>
     ...
    </div>
    </div>

javaScript：

<script type="text/javascript" src="/slick-1.5.7/slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        console.log("inside docready");
          $('.slider-for').slick({
              slidesToShow: 1,
              slidesToScroll: 1,
              fade: true,
              asNavFor: '.slider-nav',     
          });


        $('.slider-nav').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          dots: true,    
          asNavFor: '.slider-for',
          dots: true,
          centerMode: true,
          centerPadding: '3%',    
          focusOnSelect: true,
        });

        $('.single-item').slick({
            dots: false,
            arrows: true,
        });
    });
</script>

在页面加载时，slider-nav 中只有一张图片可见。单击左/右slick-arrow 时，图像正确显示。我尝试在jsFiddle 中编写相同的代码。但我认为它在那里运行良好（不确定是不是因为我没有在那里使用for 循环。）

【问题讨论】：

我刚刚观察到的另一件奇怪的事情是，如果我按 F12 进入开发工具，它会触发 slider-nav 图像正确加载。（不点击任何光滑箭头）

标签： javascript jquery css carousel slick.js

【解决方案1】：

让我提一下，我的这段代码进入了一个默认不活动的选项卡。 I figured that the width calculation of the image divs is not happening when the tab becomes active.如果这是页面加载时默认的活动选项卡，则它可以正常工作，否则不能正常工作。这是因为 bootstrap 使用 display:none 来处理隐藏的选项卡，并且无法使用 display:none 获取选项卡的宽度。我找到了解决方案here。

在设置所有这些选项卡的主页面中，我插入了以下代码：

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */ 
    overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
}

我按照 CSS 解决方案更改了在引导程序中处理隐藏选项卡的方式。

【讨论】：

【解决方案2】：

我还不能评论，所以我把它作为答案。

有几处可能是错误的，但这可能与您在 slick.js 或 jQuery 中的加载方式有关。

您使用的是最新版本的 jQuery 吗？
您使用的是最新版本的 slick.js 吗？
是否在 slick.js 之前加载了 jQuery？

它是否在您的控制台中出现任何错误？不久前我遇到了同样的问题（Slick Carousel Uncaught TypeError: $(...).slick is not a function）。最终我发现我包含了两个版本的 jQuery，其中一个非常旧。

【讨论】：

我有最新版本的 slickjs，slick。 CSS 和 jQuery。我在控制台上没有收到任何此类错误。我在 layout.ejs 文件中的 slick.js 之前导入了 jQuery。

【解决方案3】：

当光滑的滑块位于默认情况下不打开的基础选项卡内时，我发生了这种情况。

这段代码修复了它

   $('.accordion-item').on('click', function (e) {
      $(".my_slick_gallery").slick('setPosition');
    });

【讨论】：