我正在尝试为我正在处理的网站的主页创建一个全宽、固定高度、旋转木马图像 slider 。
也就是说，图像缩放到固定高度(与轮播高度匹配(宽度无关紧要))，它会像页面本身一样响应缩放。 但是，我希望我的 slider 重量更轻/更简单。
到目前为止，这是我的代码:
(这里是头)
<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;
}
非常感谢您的帮助。 - 科迪
最佳答案
not snapping to height bounds
我在 flexslider 中看不到任何与高度有关的东西。通过创建大小相似的缩略图或使用 CSS 强制高度，确保所有元素的高度相同。您可能需要删除 itemWidth 配置以避免拉伸(stretch)。
not displaying navigation
您的 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:"< PREV",
nextText:"NEXT >",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0
关于javascript - 使用 flexslider 创建响应式、全宽、固定高度、轮播图像 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29868631/