e-smartsolution ยป Blog Archives

Tag Archives: jQuery

Website developer Wordpress

Fixed size of Flexslider, controlling the height

Published by:

1- Incliude the stylesheet abd jquery and flexslider-min


var $f = jQuery.noConflict(true);
$f(window).load(function() {
// The slider being synced must be initialized first
$f(‘#carousel’).flexslider({
animation: “slide”,
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 75,
itemMargin: 5,
asNavFor: ‘#slider’
});

$f(‘#slider’).flexslider({
animation: “slide”,
controlNav: false,
animationLoop: false,
slideshow: false,
sync: “#carousel”
});
});

2. … and now you will to control the height of the images… by add the next style rules..

.flexslider .slides img {
max-height: 600px; /*maximum height for all slides*/
width: auto; /*proper aspect ratio of images*/
max-width: 100%; /*maximum width for all slides*/
margin: 0 auto; /*centering images in the container*/
}