Flexslider - thubmnail slider stops slide show on click carousal - javascript

I want to implement Flexslider, so I used "Slider w/thumbnail slider" from their home page. Everything fine and working, but I noticed one thing. If I click on any carousel element, it stops the Slideshow. After I need to click on each carousel item to see the slides.
So Is there any option to stop this behavior? I have just made a Fiddle with basic configs to show this.
here is the fiddle
code:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
sync: "#carousel"
});

After seven years this was asked, I can confirm what vivekkupadhyay wrote in his first comment: it is enough to set pauseOnAction: false, instead of pauseOnAction: true, inside
$.flexslider.defaults = {
};
at the bottom of the js file.

Related

Add class and then fire an event JQuery

I am trying to add class and then fire an event, but unfortunately its not working and I think I am trying in wrong way, can somebody please suggest? Following are my codes
First I want to add class
$(".hospital_listing_front").addClass('flexslider-hospital');
Once the class is added then fire the following function (This is related to flexslider and will add flexslider functionality)
$(".flexslider-hospital").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 48,
pausePlay: false
});
Add class is working but flexslider is not working
Please suggest how to handle this.
thanks in advance
I thought it may be have provide some time to add class. Like may be use setTimeout will solve your problem just try and let me know if you face again the same issue.
$(".hospital_listing_front").addClass('flexslider-hospital');
setTimeout(function() {
$(".flexslider-hospital").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 48,
pausePlay: false
});
}, 1000);
Why not chain it?
$(".hospital_listing_front").addClass('flexslider-hospital').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 48,
pausePlay: false
});
or if you wish to step it:
$hospital = $(".hospital_listing_front");
$hospital.addClass('flexslider-hospital')
$hospital.flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 48,
pausePlay: false
});
but if flex slider does't work, there might be an issue with your formatting of html.
without your html that's hard to say for sure..

Flexslider infinite loop and create("clones") > 1

Here is an example of infinite loop with flexslider:
http://jsfiddle.net/U2Ysh/161/
Problem is it clones only the first image at the end.
If you click through the slides you'll have to reach exactly the end before the show starts from the beginning.
Is there a solution to fire those image clones a couple of slides before to avoid the ugly white gap? Or something else to achieve this? Thx alot.
$('.flexslider.banners').flexslider({
animation: "slide",
animationLoop: true,
controlNav: false,
slideshow: false,
smoothHeight: true,
variableImageWidth: true,

Flexslider in tabbed panel gets messed up after browser window resize

I have two Flexsliders inside two different panels of a javascript tabbed panel. It loads perfectly fine. However, if I resize my browser window by either turning my iPhone from portrait to landscape or resizing the window on my Macbook Pro, the Flexsliders often get messed up. This doesn't happen all the time but it will happen eventually if I keep resizing my browser window. You can see it easiest by turning an iPhone from portrait to landscape and then clicking on the other tab containing the other Flexslider as described below.
The two Flexsliders are in the first two tabs, "Commonweath & Council" and "Transmission Gallery." If the panel is open to Commonwealth & Council and I resize my browser window, the Flexslider will adjust accordingly and will be fine in the open panel. However, after I finish resizing my browser window, and click on the other tab that contains the second Flexslider (in this case, Transmission Gallery), that Flexslider will often be messed up. The main slider container will be larger and the image inside is oversized and cropped. Or in some cases, the main slider turns into a carousel slider like the one below it. Or the image in the main slider is off-centered. But then if I click outside of the browser window on my Macbook Pro and click back on the browser window, it will pop back into the correct display. On my iPhone, I would have to refresh the webpage to make it display correctly.
I'm thinking it has to do with the Flexslider in the other tab, which is not open, not being able to read the window size change and scale correctly? Though sometimes it works fine and sometimes it doesn't, so maybe it's a bug with Flexslider? But for sure it will happen the second or third time I resize the window or turn my iPhone from portrait to landscape.
http://jmoon.net/projects/phoenixrising/phoenixrising_p1.html
I ended up using Tweaky.com to fix my Flexslider issue. Below is the correct script to account for browser window resizing.
<script defer src="../../scripts/jquery.flexslider.js"></script>
<script>
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
});
})
</script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('.flex-caption').fadeToggle();
});
$('#slider2').hover(function() {
$('.flex-caption').fadeToggle();
});
});
</script>

Why isn't my jQuery Flex Slider pausing?

I've tried all manner of things based on the documentation but no matter what I do, I can't seem to make it pause.
Here's what the documentation says:
slider.pause() //Function: Pause slider slideshow interval
slider.play() //Function: Resume slider slideshow interval
But it doesn't specify how to define the slider variable. I've tried:
var slider = $('.flex-slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
animationLoop: true,
slideshow: true,
animationSpeed: 600,
slideshowSpeed: 1200,
controlNav: false,
directionNav: false,
pausePlay: false
});
$('.pause-button').on('click',function({
slider.pause();
});
Which resulted in... http://puu.sh/4qpo3.png
And I've tried:
$('.flex-slider').flexslider().pause();
Which resulted in... http://puu.sh/4qpcS.png
And I've tried:
$('.flex-slider').flexslider().pause(true);
Which resulted in... http://puu.sh/4qpcS.png
And all in all I'm just not seeing what exactly I'm doing wrong here.
Anyone wanna provide some insight? :)
Try $('.flex-slider').flexslider('pause') and $('.flex-slider').flexslider('play').
Hi I see you turned off the option
pausePlay: false
Now edit few thing. first turned on the option
pausePlay: true,
pauseText :"Pause",
playText :"Play",
Now you will see a play pause text comes in the slider, with having two different classes for pay and pause, just add your icon image to that class with css. and you will have you desired functionality.

Flexslider with content loaded using JavaScript

I'm loading the content using:
jQuery('slides').html(slides);
I'm using this slider http://flexslider.woothemes.com/. Here is the question. How can I load this slider when the slides in the HTML structure will be added?
All works well when I enter to my website using direct link - then the content is loaded automatically. I have a problem when I load a "subpage" using jQuery, then slider doesn't work.
I tried to add:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
after jQuery('slides').html(slides);, but it doesn't work.
Thanks!
'slides' isn't a tag name so that last part wouldn't work. Try making that selector actually work, like by using $('#slides')

Categories