單擊一個光滑箭頭後加載slick的滑塊圖像

我試圖使用slick庫實現滑塊同步。我有一組來自後端的名爲pictures的圖像。我循環這些圖像以填充我的slider-for和slider-nav div。單擊一個光滑箭頭後加載slick的滑塊圖像

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循環。）

來源

2015-08-28 AshwiniR

我剛纔觀察到的另一個奇怪的事情是，如果我按F12開始工具，它會觸發'slider-nav'圖像正確加載。（不點擊任何光滑箭頭） – AshwiniR

讓我來提一下，我的這段代碼進入了一個默認情況下不活動的選項卡。我認爲當選項卡變爲活動狀態時，圖像div的寬度計算不會發生。如果這是頁面加載時默認的活動選項卡，它可以正常工作，否則不會。這是因爲引導程序使用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的解決方案來改變隱藏標籤在引導處理方式。

來源

2015-08-28 20:18:11 AshwiniR

我還不能評論，所以我給它作爲答案。

有幾件事情可能是錯誤的，但它可能與您在slick.js或jQuery中加載的方式有關。

你使用的是最新版本的jQuery？
您使用的是最新版本的slick.js嗎？
jQuery被加載之前，slick.js？

它是否給控制檯帶來任何錯誤？我前段時間遇到同樣的問題（Slick Carousel Uncaught TypeError: $(...).slick is not a function）。最終我發現我包含jQuery的兩個版本，其中一個非常古老。

來源

2015-08-28 09:56:34 Sanderfish

我有最新版本的slickjs，光滑。 CSS和jQuery。我沒有在控制檯上得到任何這樣的錯誤。我已經在layout.ejs文件中的slick.js之前導入了jQuery。 – AshwiniR

單擊一個光滑箭頭後加載slick的滑塊圖像

回答

相關問題