响应式设计功能Carousel js

时间:2015-07-20 07:15:00

标签: jquery html css

这是简单的滑块工作:

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>

jquery的:

$(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(它不起作用,但在localhost中工作正常)

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

谢谢,

1 个答案:

答案 0 :(得分:0)

因此,您需要在调用库函数之前包含库代码。

该库也使用jquery live函数,该函数已从jQuery 1.7 - http://api.jquery.com/live/弃用。

所以要么你使用另一个库,要么我建议你在1.7之前使用jQuery版本(虽然我不推荐)。

这是一个更新的小提琴,它基于jQuery 1.6.4 - http://jsfiddle.net/drecodeam/n4brbcpg/1/