使用 flexslider 创建响应式、全宽、固定高度、轮播图像滑块答案

【问题标题】：Using flexslider to create a responsive, full width, fixed-height, carousel image-slider使用 flexslider 创建响应式、全宽、固定高度、轮播图像滑块
【发布时间】：2015-04-25 17:47:23
【问题描述】：

我正在尝试为我正在处理的网站的主页创建一个全宽、固定高度、轮播图像滑块。

也就是说，图像被缩放到固定高度（与轮播高度匹配（宽度无关紧要）），它会像页面本身一样响应缩放。但是，我希望我的滑块重量更轻/更简单。

到目前为止，这是我的代码：

（这里是头）

<head>
<!-- Flex Slider API JS -->
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 5,
            minItems: 2,
            maxItems: 4
        });
      });
    </script>
<!-- End of FlexsliderAPI JS -->
</head>

这是正文：

<body>
    <!-- Placement of Flex Slider -->
    <div class="flex-container">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="../../local/images/slide1.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide2.JPG"/>
            </li>
            <li>
              <img src="../../local/images/slide3.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide 5.jpg" />
            </li>
          </ul>
        </div>
    </div>
    <!-- End placement of FlexSlider -->
</body>

这是 CSS：

.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}

非常感谢您的帮助。 - 科迪

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

不吸附到高度范围

我在 flexslider 中看不到任何与高度相关的东西。通过创建类似大小的缩略图或使用 CSS 强制高度，确保所有元素的高度相同。您可能需要删除 itemWidth 配置以避免拉伸。

不显示导航

您的 HTML 缺少导航元素。我认为您需要对其进行配置；传递导航选项：

controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",

offercard使用的配置是：

slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"&lt; PREV",
nextText:"NEXT &gt;",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0

【讨论】：

这有帮助。我是 java 脚本的新手，因此很难理解每个元素如何影响幻灯片。对于提出正确问题的误解，我们深表歉意。我只是认为他们会被假定。