Menu
I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.
That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does. However, I want my slider to be of lighter weight/ greater simplicity.
Here is my code thus far:
(here is the head)
<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>
Here is the body:
<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>
And here is the 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;
}
Thanks a ton for the help. - Cody
397
not snapping to height bounds
I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.
not displaying navigation
Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
The configuration offercard uses is:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
