jquery貓頭鷹旋轉木馬：如何使當前幻燈片集中

我正在使用貓頭鷹圖像旋轉木馬。 http://owlgraphic.com/owlcarousel/demos/images.html jquery貓頭鷹旋轉木馬：如何使當前幻燈片集中

它工作正常。我想使目前的幻燈片稍大一點比其他幻燈片更大。換句話說，我想讓當前幻燈片的寬度更大。

使當前幻燈片更大的我已經添加以下代碼：

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 
     autoPlay: 3000, 
     responsive: true, 
     addClassActive: true, 
     items: 4, 
     itemsDesktop: [1199, 3], 
     itemsDesktopSmall: [979, 3], 
    }); 
});

在這裏，我添加的活性類活動的幻燈片。我試圖放大當前幻燈片。

因爲我添加了以下樣式表代碼。

.active: nth - child(2) { 
    transform: scale(1.2); 

}

但是當旋轉木馬滾動第二個項目不保留突出顯示。需要幫助縮放貓頭鷹旋轉木馬中的當前幻燈片。

是否有任何其他響應旋轉木馬縮放當前滑塊？ enter image description here

來源

2014-06-30 Jack Torris

你是顯示4張幻燈片在同一時間，所以你怎麼能檢測到中間的一個？也提示： - 您需要更改該圖像的寬度和高度 –

如何更改該圖像的高度。因爲旋轉木馬將滾動當前幻燈片項目將會改變。所以當前的幻燈片項目應該放大使用Transform：scale（2.2） –

你知道了嗎？我有同樣的挑戰。 –

http://jsfiddle.net/gjgmqznq/3/

$(document).ready(function() { 

    $("#owl-demo").owlCarousel({ 

     autoPlay: 3000, //Set AutoPlay to 3 seconds 
     responsive: true, 
     addClassActive: true, 
     items: 4, 
     itemsDesktop: [1199, 3], 
     itemsDesktopSmall: [979, 3], 
     stopOnHover:true, 
     afterMove:function(){ 
      //reset transform for all item 
      $(".owl-item").css({ 
       transform:"none" 
      }) 
      //add transform for 2nd active slide 
      $(".active").eq(1).css({ 
       transform:"scale(1.9)", 
       zIndex:3000, 

      }) 

     }, 
     //set init transform 
     afterInit:function(){ 
      $(".active").eq(1).css({ 
       transform:"scale(1.9)", 
       zIndex:3000, 

      }) 
     } 

    }); 

})

來源

2014-11-28 10:24:13 dm4web

jquery貓頭鷹旋轉木馬：如何使當前幻燈片集中

回答

相關問題