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

Question

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

A.R*_*K.S 3 javascript css jquery carousel slick.js

我正在尝试使用slick库实现Slider Syncing .我有一组pictures来自后端的图像.我循环遍历这些图像,将它们填充在我slider-for和slider-navdiv 之下.

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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

slider-nav在页面加载中只能看到一个图像.单击左/右slick-arrow,图像正确显示.我试着在jsFiddle中编写相同的代码.但我认为它在那里运作良好(不确定它是否因为我在for那里避免使用循环.)

Answer 1

A.R*_*K.S 7

让我提一下,我的这个代码会进入一个默认情况下不活动的选项卡.我认为当标签变为活动状态时,图像div的宽度计算不会发生.如果在页面加载时默认为活动选项卡,则它可以正常工作,而不是其他方式.这是因为bootstrap用于display:none处理隐藏的选项卡,并且无法获得选项卡的宽度display:none.我在这里找到了解决方案.

在我的主页面中,所有这些选项卡都已设置,我插入了以下代码:

.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  */
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，5 月前
查看次数：	6954 次
最近记录：	10 年，5 月前