jquery - 功能 Carousel js 的响应式设计

Question

这是简单的 slider 工作:

html:

<div class="carousel-container">

      <div id="carousel">
        <div class="carousel-feature left">
          <a href="#">
          <img class="carousel-image" alt="Image Caption" src="images/img1.jpg"></a>

        </div>
        <div class="carousel-feature middle">
          <a href="#"><img class="carousel-image" alt="Image Caption" src="images/img2.jpg"></a>

        </div>
        <div class="carousel-feature right">
          <a href="#"><img class="carousel-image" alt="Image Caption" src="images/img3.jpg"></a>
        </div>

      </div>
    </div>

j查询:

$(document).ready(function() {
    var carousel = $("#carousel").featureCarousel({
      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .5,
        largeFeatureHeight:     .5,
        smallFeatureWidth:    .2,
        smallFeatureHeight:     .2,    
        topPadding:           100,    
        sidePadding:          30
    });
});

这是示例:JSFIDDLE (它不起作用，但在本地主机上工作正常)

我需要了解响应式设计，我可以知道如何在调整窗口大小时动态更改图像的宽度。

谢谢，

Answer 1

所以你需要在调用库函数之前包含库代码。

该库还使用 jquery live 函数，该函数已从 jQuery 1.7 中弃用 - http://api.jquery.com/live/ .

所以要么你使用另一个库，要么我建议你使用 1.7 之前的 jQuery 版本(尽管我不推荐)。

这是一个更新的 fiddle ，它可以工作并且基于 jQuery 1.6.4 - http://jsfiddle.net/drecodeam/n4brbcpg/1/