貓頭鷹旋轉木馬響應裁剪寬度調整大小jQuery的css

我使用貓頭鷹旋轉木馬創建一個畫廊旋轉木馬/幻燈片放映在我們的主頁上。 http://owlgraphic.com/owlcarousel/貓頭鷹旋轉木馬響應裁剪寬度調整大小jQuery的css

但我們希望它具有響應性，但不能調整圖像大小，而應將寬度均等地增加到某個最大「作物數量」。這是目前的代碼。

$(document).ready(function() { 
    function scaleCarousel() { 
     var imgWidth = 1000; 
     var parentWidth = $('#home-carousel').parent().width(); 
     console.log("parent: "+parentWidth); 
     if (parentWidth < 10000) { 
      var crop = (parentWidth - imgWidth)/2; 
      console.log("crop: " +crop); 
      if(crop < -200) crop = -200; 
      $('.owl-wrapper-outer').css({position: "relative", left: crop + "px"}); 
     } 
    } 
    $(window).resize(function(){ 
     scaleCarousel(); 
    }); 
    scaleCarousel(); 
});

我試圖針對我的旋轉木馬的div＃回家傳送帶，所有的包裝，物品，IMG，他們都不工作，我想，有右側總是重疊的圖像或本白塊（因爲圖像正在向左移動）有一件事情使得＃home-carousel div的寬度非常高，只有10,000，但這並不好，因爲水平滾動條會出現在頁面上。

也許有一個更簡單的方法來做到這一點？

編輯：移動img作品迄今爲止最好，同時確定尺寸，但在確定尺寸時可以看到重疊的圖像。這可能是由於「刷新率」或調整大小事件觸發的頻率。我想我需要手動隱藏項目並僅顯示當前項目。歡迎任何其他解決方案。

來源

2014-06-20 user3542112

請提供演示小提琴 –

看起來我的裁剪代碼是按照預期工作的，它有這種行爲的貓頭鷹傳送帶（即使沒有我的代碼，如果你在他們的網站上調整了一些他們的演示，你會看到重疊的圖像一秒鐘）避免這種情況的唯一方法是使其寬度可擴展，但這不是我們想要的。現在我們正在放手，另一個選擇是在每個動作之前用jquery手動隱藏/顯示內容。

來源

2014-06-21 15:30:54 user3542112

貓頭鷹旋轉木馬響應裁剪寬度調整大小jQuery的css

回答

相關問題