.flex-viewport,.flex-control-thumbs li{}
.flex-viewport:hover,.flex-control-thumbs li:hover{}
.flex-viewport { max-height:2000px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
.loading .flex-viewport { max-height:300px; }
.flexslider .slides { zoom:1; }
.slides:after {content:"\0020"; display:block; clear:both; visibility:hidden; line-height:0; height:0}
html[xmlns] .slides {display:block}
- html .slides {height:1%}
.flexslider img{height:auto;width:98%}
.flexslider ul.slides > li{min-height:300px}
.flexslider ul li{display:none;-webkit-backface-visibility:hidden;position:relative}
.flexslider ul li .left{border-right:1px solid #fff;float:left;margin:40px 0;padding:0 2.08%/20px/ 0 1.04%/10px/;width:62.5%/600px/}
.flexslider ul li h1,.flexslider ul li h2{font:36px/1em 'ArvoRegular',Arial,Helvetica,sans-serif}
.flexslider ul li h1,.flexslider ul li h2,.flexslider ul li h3{margin:0 0 4px;text-align:left}
.flexslider ul li p{line-height:1.25em}
.flexslider ul li .right{float:right;margin:40px 0;padding:0 1.04%/10px/ 0 0;width:31.25%/300px/}
.flexslider ul li .right li{display:block;padding:0}
.flexslider ul li .right img{display:block;margin:0 auto;max-width:400px}
.flexslider ul li .right li span{font:bold 14px Arial,Helvetica,sans-serif;padding:0 4px 0 0}
.flexslider-thumbs ol.slides{width:100% !important}
.flexslider-thumbs ol li{display:inline-block;margin:1.5% 1.04%/10px/ 30px;position:relative;width:31.25% /300px/ !important}
.flexslider-thumbs ol li img,.flexslider-thumbs ol li{cursor:pointer;-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;width:100%}
span.flex-caption{bottom:0;font:16px/1em Arial,Helvetica,sans-serif;height:1em;left:0;margin:auto;position:absolute;right:0;text-align:center;top:0}
.no-js .slides > li:first-child {display:block}
$(window).load(function() {
// The slider being synced must be initialized first
$('.flexslider-thumbs').flexslider({
animation: "slide",
animationLoop: false,
controlNav: false,
directionNav: false,
slideshow: false,
asNavFor: '.flexslider'
});
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
controlNav: false,
directionNav: false,
smoothHeight: true,
slideshow: false,
sync: ".flexslider-thumbs"
});
});
smoothHeight would just be removed, or set to false. If you are wanting them to be the same height, then you don't need height animation between slides anyway. :) @RedPlugDesign
I am not explaining well. Yes, the slides are the same height without smoothHeight, but the content is not.
<div class="wrapper flexslider-thumbs">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides">
<li>
<div class="wrapper">
<div class="left">
<h1></h1>
<p></p>
<h3></h3>
<p></p>
<a></a>
</div>
</div>
<div class="right">
<a><img/></a>
<ul>
<li><span></span></li>
</ul>
</div>
</ul>
</div>
</div>
I need .left & .right to be the same height on all the slides. I have tried equal height JQuery, but nothing works well, and breaks on resize.
I'm using FlexSlider on a lot of my sites and it usually works very well - Thanks a lot!
This time I'm trying to set up a vertical slider and it doesn't really behave as I expect.. I know the functionality is limited for vertical sliders. I followed the docs few mentions about vertical - each item have to be fixed height, no carousel, etc. The problem is, the slider never stops scrolling even when it reaches the botom of the <ul>. It just continues - only showing white space.
How do I get around this? Is this a know issue? Couldn't find any info about it Googling for 45min.
Thanks, David
if (hash) {
index = /\d+/.exec(hash)[0];
index = (parseInt(index) || 1) - 1;
}
$("#peopleslider").flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
directionNav: false,
startAt: index, //now foo.html#3 will load item 3
after:function(slider){
window.location.hash = slider.currentSlide+1;
//now when you navigate, your location updates in the URL
}
});
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
prevText: "<i class='fa fa-caret-left fa-lg'></i>",
nextText: "<i class='fa fa-caret-right fa-lg'></i>",
itemWidth: 175,
itemMargin: 0,
minItems: 1,
maxItems: 5,
asNavFor: '#peopleslider'
});
there's a bug that check the .flexslider container width instead .flex-viewport
if someone try to customize the .flex-viewport manually (custom width)
the default viewport just check the .flexslider width, not the .flex-viewport
e.g:
.flexslider = 953
.flex-viewport = 289
transform: translate3d(-289px, 0px, 0px)
hello guys, any thought how to hide flex-prev on the first slide / flex-next on the last slide?
I'm using start() callback, it worked. but it didn't going well when I did this:
first slide (the flex-prev is gone :smile: ) -> click next -> and then, click prev (the flex-prev is there)
