滑動輪播中心模式的問題 - 增長中心項目

我正在執行Ken Wheeler的滑動輪播並且在設計中心項目時遇到了一些麻煩。滑動輪播中心模式的問題 - 增長中心項目

在centerMode的演示中：在他的網站上顯示爲true，中心圖塊比其他圖塊大。

我也希望以這種方式實現它，但是當我將自定義樣式應用於中心項以增加其大小時，旋轉木馬的動畫變得非常動盪且不穩定。

我的HTML看起來像這樣：

<div class="main-carousel"> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
    </div>

我用的div內conained圖像工作。這裏是我的CSS：

.slick-current img{ 
    width: 350px !important; 
    padding-top: 0px !important; 
} 

.tile-container img{ 
    width: 284px; 
} 

.tile-container img{ 
    padding-top: 20px ; 
} 

.tile-container{ 
    padding: 5px; 
}

最後我光滑的啓動腳本是這樣的：

$('.main-carousel').slick({ 
    centerMode:true, 
    centerPadding: '80px', 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    infinite: true, 
    variableWidth: true, 
    variableHeight: true 
});

它也像沒有被應用centerPadding - 這就是爲什麼我手動添加的造型來種植中心瓷磚。

總結：我實際上唯一遇到的問題是，當我將樣式應用於生長中心區域時，旋轉木馬的動畫變得異常活躍。

我正在使用jQuery 3.1.1以及jquery-migrate。轉盤所需的所有樣式也將被導入。

的jsfiddle：https://jsfiddle.net/b3cfooz5/

來源

2017-05-30 Zenith

你好Zenith，你可以分享一個JSFiddle或者你的開發者網站嗎？ –

對不起，忘了旋轉一個。在這裏你去https://jsfiddle.net/b3cfooz5/ – Zenith

解決它。我使用了

transform: scale(1.08);

用於縮放中央項目，而不是用像素寬度調整它的大小。

這是希望在未來有人遇到同樣的問題，並找到此線程。

來源

2017-05-30 18:45:34 Zenith

滑動輪播中心模式的問題 - 增長中心項目

回答

相關問題