Question

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

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

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

（这是头）

<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;
}

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

Answer 1

没有捕捉到高度界限

我在柔性滑板上看不到任何与高度相关的东西。通过创建类似大小的缩略图或使用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

使用flexslider创建一个响应，全宽，固定高度，旋转木马图像滑块

1 个答案: