I'm building a Flexslider which uses a thumbnail navigation. It's essentially identical to the Flexslider demo seen here http://flexslider.woothemes.com/thumbnail-slider.html. It all works fine, but if I try to use the StartAt property it breaks the directional nav on the thumbnails. It jumps to the wrong place and sometimes kills the directionNav links.
This is my code. There are 5 #carousel items shown on the page at once, and one #slider item, the same as on the Flexslider demo.
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 230,
itemMargin: 40,
move: 5,
startAt: 2,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
startAt: 2,
sync: "#carousel"
});
If I run just the #carousel code which shows 5 items at once, I found that 'startAt' talks to one 'run of items' rather than one item. So startAt 0 will show items 1-5, startAt 1 will show items 6-10 and so on.
If there is just one item shown at a time (like on #slider) then the 'run' is 1 item. So startAt 0 is item 1, startAt 1 is item 2 and so on.
I think this is linked to the bug. When these are synced if I hit next on the directionNav of #carousel (when startAt of #carousel is 2), it jumps me to thumbnail items 16-20 (what would be run 3 if not synced). If I were to hit prev instead, it jumps me to items 6-10 (what would be run 1 if not synced).
Has anyone figured out a way around this bug?
Thanks
So i had this same issue, trying to do essentially the same thing.
I haven't found a solution but i have found the issue on github:
https://github.com/woothemes/FlexSlider/issues/277
The issue seems to be that when flexslider is loading, the sync method is not available. So when loading, sync is not possible. I tried calling sync from the start event on the slider, with no luck. This is an issue that needs to be fixed in flexslider itself, which requires a patch.
I'm sorry i couldn't be more helpful, but i hope the work around in the github issue is helpful to you.
Related
Good Day.
I like all the animation on all elements except <body tag. I believe the time is too long (500ms, maybe?) before the page scrolls up. Until everything loads and then the page scrolls up, there's just a blank page.
Suggestions?
// aos scroll-animation Init
AOS.init({
duration: 50,
once: true,
delay: 50
});
doesn't seem to make any difference.
I'm having an issue with owlcarousel. When I use large images with items:1 everything works well and each slide contains 1 image. But when I use smaller images the items:1 option is ignored and the images display 4 per slide.
owlcarousel is version 2.3.4 as are the corresponding CSS files.
$(document).ready(function(){
$(".news-post-gallery").owlCarousel({
navigation : false, // Show next and prev buttons
autoplay:false,
items: 1,
loop:false,
margin: 10,
center: true,
nav: true,
navText: [
"<div>Left</div>",
"<div>Right</div>"
],
responsive:{
0:{
items:1,
}
}
});
});
My first guess is that this is a CSS issue. Mind you even the small images are not that "small", the large images that I used were like half my screen width.
Edit: navText is being ignored as well when small images are used.
The issue was another carousel being initialized targeting the owl-carousel class. This ended up initializing the one I needed with the wrong settings. The carousels initializations were coming from different templates so the result was only visible in the source once the page was loaded.
Adding $(...).owlCarousel('destroy'); before i initialized mine solved the problem.
I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
I am using the flexslider after event to trigger another function but the after event in flexslider does not work in combination with fade on an iPad.
Using slide as animation solves the problem but I need fade instead of slide.
$('.flexslider').flexslider({
slideshow: true,
animation: "fade",
animationSpeed: 1000,
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
start: function(){animation()},
after: function(){animation()},
before: function(){}
});
I had a similar issue, I needed to execute a function in the after callback and it didn't fire off on ipad.
I made a quick workaround and I've used the before method instead, it didn't have any downsides for me because I just needed to update an external slide counter.
I have looked into the flexslider 2.1 code and I think that the lines 520-521 or 527-530 are causing problems here:
520-521
slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
527-530
slider.slides.eq(slider.currentSlide).bind("webkitTransitionEnd transitionend", function() {
// API: after() animation Callback
vars.after(slider);
});
You can debug it if you want, I hope you'll find it useful.
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'