旋轉木馬與當前幻燈片的縮放

我用Slick.js來製作旋轉木馬就像在圖片上，但我失敗（有沒有人知道任何方式來製作旋轉木馬就像一張圖片？應該有一個不同的幻燈片，動畫，和當前幻燈片的寬度必須有一個更大的尺寸旋轉木馬與當前幻燈片的縮放

我需要做什麼：

我現在有什麼 - https://jsfiddle.net/fiter92/xL5qezxy/

jQuery(document).ready(function($){ 
 

 
    $('.carousel').slick({ 
 
     infinite: true, 
 
     slidesToShow: 4, 
 
     slidesToScroll: 1, 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '60px', 
 
     variableWidth: true 
 
    }); 
 

 
    $('.carousel-nav').slick({ 
 
     infinite: true, 
 
     slidesToShow: 1, 
 
     slidesToScroll: 1, 
 
     autoplay: true, 
 
     arrows: true, 
 
     appendArrows: '.carousel-arrows', 
 
     prevArrow: '<span class="carousel-prev">&lt;-</span>', 
 
     nextArrow: '<span class="carousel-next">-&gt;</span>', 
 
     asNavFor: '.carousel', 
 
    }); 
 

 
});

.slick-slide { 
 
    padding: 20px; 
 
} 
 

 
.slick-current img { 
 
    width: 120%; 
 
    max-width: none; 
 
}

<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<div class="carousel"> 
 
    <div> 
 
     <img src="http://dummyimage.com/600x400/000/fff&text=1" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://dummyimage.com/600x400/000/fff&text=2" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://dummyimage.com/600x400/000/fff&text=3" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://dummyimage.com/800x400/000/fff&text=4" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://dummyimage.com/400x400/000/fff&text=5" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://dummyimage.com/600x400/000/fff&text=6" alt=""> 
 
    </div> 
 
</div> 
 
<div class="carousel-nav"> 
 
    <div>01</div> 
 
    <div>02</div> 
 
    <div>03</div> 
 
    <div>04</div> 
 
    <div>05</div> 
 
    <div>06</div> 
 
</div> 
 
<div class="carousel-arrows"> 
 
</div>

來源

2016-05-21 fiter

小心分享您的代碼？ –

我已更新我的問題 – fiter

實際上這不是答案..但是如果您使用引導程序..它提供了一個很好的傳送帶您正在尋找..或只是看引導程序後面的代碼css – mimu1011

由於您使用的中心模式，你可以添加一個變換的規模到獲取類光滑中心的幻燈片。然後爲縮放效果設置動畫，您可以向滑動幻燈片類添加轉場。

.carousel .slick-slide { 

    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
.carousel .slick-center { 
    -webkit-transform: scale(1.8); 
    transform: scale(1.8); 

}

來源

2016-08-19 01:41:39

旋轉木馬與當前幻燈片的縮放

回答

相關問題