I'm currently trying to use the flexslider at full-width and the at a certain breakpoint I want the directional arrows to drop under the slider for mobile use. I would then use text buttons here to move the slider.
I tried a few solutions. Created two sliders: One for full width and one for mobile. I hide the full-width one when it reaches the breakpoint, but I can't seem to combined these two pieces of javascript to make it work.
Has anyone did this before that could help me out?
Basicly trying to use the Basic Slider Here as my full-screen slider and combined it with the Basic Slider customDirectionNav for my mobile slider.
This one is used for full-width
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
This one is used for mobile with the directional arrows/text on the bottom
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
customDirectionNav: $(".custom-navigation a")
});
});
</script>
You could use Modernizr to activate different instances of your script at different brakepoints.
For example:
$("body").each(function() {
if (Modernizr.mq('only screen and (min-width: 750px)')) {
// For full-width
$('.flexslider').flexslider({
animation: "slide"
});
} else {
// For mobile
$('.flexslider').flexslider({
animation: "slide",
customDirectionNav: $(".custom-navigation a")
});
}
});
Related
I am trying to create a flex slider. Where we have button at the top, when the user selects any button the content below it changes using the flex slider, my flexslider is working but I am not able to pass parameter into the jquery to change content.
currently my flexslider js is :
$(document).ready(function()
{
$(window).load(function(){
$('.cmsslider').flexslider({
animation: 'slide',
selector:'.slidercontent .row',
animationLoop:true,
slideshow:false,
controlsContainer: ".container",
controlNav: true,
manualControls: "#thumbnail img",
slideshowSpeed: 700
});
});
});
Maybe you're looking for something like:
$("#someBtn").click(function(){
$(".cmsslider").html("//new content here");
});
I'm using flex slider in my html .
I have followed given steps to add slider in my html page.
Slider works well When animation = "slide" But
Not working properly when animation = "fade" ;
Fade effect does not show proper slides .
here is my script:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationSpeed: 1000,
direction: "horizontal",
slideshowSpeed: 2000,
pauseOnHover: true,
slideshow: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Help me out.
thank's
Sounds like something with the CSS. I would create a fiddle so people can see your code and also explain exactly what you mean by "Fade effect does not show proper slides". What happens? Anything?
If you do that then I'm sure you'll get it figured out on here...
I had the same problem. Animation: "slide" worked fine but when I tried to use "fade" I wasn't able to click the thumbnails to change the slides. There is nothing wrong with the flex slider or the javascript. It works great in the flex slider demo, so...
Try fiddling with the positioning/layering of the <ol>. The thumbnails are probably layered beneath the main slide image, making it impossible to actually click them.
This worked for me:
ol.flex-control-thumbs {clear: both;}
But you can also try playing with positioning and z-index if clearing doesn't work. It's going to depend heavily on how your HTML and CSS is structured. If that <ol> thumbnail list can wiggle it's way underneath the slider, it will. And nobody likes not being able to click stuff!
In my case, solution was simple.
Thumbnails work well, but its "under" the slides. Just set .flex-control-nav with high z-index.
.flex-control-nav{
z-index:500;
}
Should work.
I've used flexslider and fancybox numerous times and both are great plugins. Separately, both these work great on a site I'm doing but the problem I'm going to describe now occurs when a flexslider gallery is places inside a fancybox div. I must point out this is a responsive website so there are no static widths, all widths are percentage based.
At first everything seems to be working. I load fancybox and flexslider displays as it should, its width 50% of the fancybox container. But if I add display: none; to the fancybox div which it needs to hide the div until its called upon, when fancybox loads all the images in flexslider are tiny, though the width of the flexslider div is correct. I'm assuming that because flexslider loads when the page does it has no idea what its width is. Which is why this doesn't occur when display: none; is set.
My javascript to load the 2 plugins currently looks like this:
// =FANCYBOX
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
});
// =FLEXSLIDER
$(function(){
if($(".flexslider").length > 0) {
$(".flexslider").addClass("loading");
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshowSpeed: 5000,
animationSpeed: 360,
easing: "easeInQuad",
useCSS: false,
start: function(slider){
$('.flexslider').removeClass('loading');
}
});
});
}
});
Does anyone know how I can force flexslider to initialise again after fancybox is visible?
Thanks,
Steve
Try initializing flexslider inside fancybox's afterShow callback like :
jQuery(document).ready(function($){
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
afterShow: function(){
$('.flexslider').flexslider({
// flexlslider options
});
}
}); // fancybox
}); // ready
you should avoid display:none; for fancybox, so flexslider can determine image size properly.
this trick may help you:
put fancybox div inside a parent div.
set visibility:hidden; for fancybox div.
set display:none; for parent div.
hope that it helps.
When I try to use "basic flexlisder" (http://flexslider.woothemes.com/index.html) and "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <div class="flexslider">). However, after analyzing source code on flexslider page, I found they put the carousel in <div class="flexslider carousel"> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.
I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?
My javascript:
<script type="text/javascript">
//slideshow
$(window).load(function() {
$('.flexslider').flexslider({
animation : "slide",
start : function(slider) {
$('body').removeClass('loading');
}
});
});
//carousel
$(window).load(function() {
$('.flexcarousel').flexslider({
animation : "slide",
animationLoop : false,
itemWidth : 210,
itemMargin : 5,
minItems : 2,
maxItems : 4
});
});
</script>
The carousel class does not actually make it a carousel, you have to assign the items a width using itemWidth, within the options:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210, // Must have a size set for it to switch to carousel view.
});
});
Make sure to use different IDs to target each individual flexslider (if you have more than one):
<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">
I have a flexslider in my website at: this link.
I need to get a bullet point style or horizontal bullet point for navigation. Following this I have added necessary <ul> and the code in JS, as like:
jQuery(function(){
jQuery('.flexslider').flexslider({
animation: "slide",
controlNav: true,
manualControls: $(".flex-control-nav li"),
});
});
But i can't get it to work. Any help is appreciated.