I have been implementing Flexslider on a few sites, and always enjoy the functionality. Currently, I am using it to slide text, not images. Each slide varies in height due to the amount of text. I have added smoothHeight, which will work, but I was hoping to find a way to dynamically equalize height and stay responsive if the page is resized during viewing.
I read: woothemes/FlexSlider#174, but cannot get it to work with the current version. Any ideas or support available?
<script src="http://www.redplugdesign.com/templates/redplugdesign/javascript/jquery.flexslider-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li style="background:url(<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($responsive_img); ?>) no-repeat center center">
<div class="wrapper">
<div class="left" style="border-color:<?php echo $this->params->get('responsive_color');?>">
<h1 style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h1); ?></h1>
<p style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h1_p); ?></p>
<h3 style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h3); ?></h3>
<p style="color:<?php echo $this->params->get('responsive_color');?>"><?php echo htmlspecialchars($responsive_h3_p); ?></p>
<a class="starthere" href="<?php echo $this->params->get('responsive_link');?>" title="<?php echo htmlspecialchars($responsive_h2); ?>">See More</a>
</div>
<div class="right" style="border-color:<?php echo $this->params->get('responsive_color');?>">
<img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($responsive_logo); ?>" alt="<?php echo htmlspecialchars($responsive_h1); ?>"/>
<ul>
<li><span style="color:<?php echo $this->params->get('responsive_color');?>">Review:</span><a href="<?php echo $this->params->get('responsive_url');?>" title="Visit <?php echo $this->params->get('responsive_url');?>" target="_blank" style="color:<?php echo $this->params->get('responsive_color');?>">Click Here</a></li>
<li style="color:<?php echo $this->params->get('responsive_color');?>"><span style="color:<?php echo $this->params->get('responsive_color');?>">CMS:</span><?php echo htmlspecialchars($responsive_cms); ?></li>
<li style="color:<?php echo $this->params->get('responsive_color');?>"><span style="color:<?php echo $this->params->get('responsive_color');?>">Features:</span><?php echo htmlspecialchars($responsive_features); ?></li>
</ul>
</div>
</div>
</li>
<li style="background:url(<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($ecommerce_img); ?>) no-repeat center center">
<div class="wrapper">
<div class="left" style="border-color:<?php echo $this->params->get('ecommerce_color');?>">
<h2 style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h2); ?></h2>
<p style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h2_p); ?></p>
<h3 style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h3); ?></h3>
<p style="color:<?php echo $this->params->get('ecommerce_color');?>"><?php echo htmlspecialchars($ecommerce_h3_p); ?></p>
<a class="starthere" href="<?php echo $this->params->get('ecommerce_link');?>" title="<?php echo htmlspecialchars($ecommerce_h2); ?>">See More</a>
</div>
<div class="right">
<img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($ecommerce_logo); ?>" alt="<?php echo htmlspecialchars($ecommerce_h2); ?>"/>
<ul>
<li><span style="color:<?php echo $this->params->get('ecommerce_color');?>">Review:</span><a href="<?php echo $this->params->get('ecommerce_url');?>" title="Visit <?php echo $this->params->get('ecommerce_url');?>" target="_blank" style="color:<?php echo $this->params->get('ecommerce_color');?>">Click Here</a></li>
.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)