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.
Related
I'm really stuck on this I found two other posts about this but nothing has worked.
Basically I set the direction of my Splide slider to RTL and every-time it brings in the next set of slides they flicker in and out.
The slider is set to autoplay using the autoplay extension.
This is the URL https://prismfly.webflow.io/
Here's the code:
const one = new Splide( '.splide', {
type : 'loop',
drag : false,
autoWidth: true,
pauseOnHover: false,
pagination: false,
arrows: false,
pauseOnFocus: false,
direction:"rtl",
autoScroll: {
pauseOnHover: false,
pauseOnFocus: false,
speed: 1.3,
},
} );
Hoping someone else has experienced this before. Would love any help or suggestions, thank you
Hi so to solve the flickering issue in splide js you have to add some custom css:
.splide--track {
Direction:rtl;
}
If this didn't work so find the class of the splide track and set direction to rtl
Also set the width of the splide container to 100%
Hope this solves ur issue.
I have a slick slider and on hover of the slider I want it to go to the second slide. I've managed to do this with mouseenter and mouseleave, however if you hover on/off the slider quickly the function doesn't work.
I'm presuming this is because it doesn't have enough time to complete each function but I'm not sure how to get around this. Any advice would be appreciated.
jsFiddle
JS:
$('.slider').on('mouseenter', function (e) {
$(this).slick('slickGoTo', 1);
});
$('.slider').on('mouseleave', function (e) {
$(this).slick('slickGoTo', 0);
});
In the function that you provided:
$(document).ready(function(){
$('.slider').slick({
dots: true,
speed: 1000,
infinite: true,
autoplay: false,
});
});
I see that you have set the speed very high. If you put speed to 10 etc. than it should work better.
I downloaded a template for owl.carousel.min.js - I have no idea how to add autoplay and arrows.
It's on a test server on http://testing.r2group.co.za/Test/index.html about halfway down. I would appreciate ANY help, as I'm proficient with HTML, but the JS is beyond me. (why I downloaded a template)
Have you found documentation for how to use the carousel? That is a good place to start.
The owl is part of a theme I am using. Looks like this javascript is included after the carousel.
<script>
jQuery(function($){
$("#latest_news .owl-carousel").owlCarousel({
lazyLoad: true,
responsiveRefreshRate: 50,
slideSpeed: 500,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: true,
navigation: false,
autoPlay: true,
singleItem: true
});
});
</script>
This tells the browser to start a new script with jQuery.
jQuery(function($){
//code
});
Inside this function is specific to Owl Carousel.
$("latest_news .owl-carousel") selects the proper element. This is where you will use your own CSS selectors to get your slider.
It is being passed a javascript object of parameters for the slider. For your autoplay, you can give it
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true
});
The arrows are also described by a setting in this object. Looks like the left/right arrows can be added like this:
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
So, at a minimum to get your arrows and autoplay, your script should look like this:
<script>
jQuery(function($){
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true,
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
});
</script>
It would be worth looking at which other settings you can change for greater customization. The slideSpeed and rewindSpeed, for example, could be a good place to get familiar playing with javascript.
please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that
My fade animation is broken in IE7 & 8. rather than fade, the next slide contents are rendered, and both slides are present and mashed together for the specified animaionDuration.
Any fixes for this?
I posted to the FlexSlider 'support' feed, but it's not very well monitored so I'm turning to SO.
Here's my call:
$('.flexslider').flexslider({
slideshow: true,
slideshowSpeed: 6000,
animation: "fade",
animationDuration: 500
});
FlexSlider Documentation here:
http://flex.madebymufffin.com/
I had the same problem, to 'fix' the issue I used an if/else statement to remove the animationDuration from IE7/8 that flex slider uses.
It does mean it's not quite as pretty in IE8/7 but it fixes the issue and leaves all the latest browsers looking as you intended!
if ($().flexslider) {
if (window.navigator.userAgent.indexOf('MSIE 8.0;') > 0) {
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
animationDuration: 0,
controlNav: false,
pauseOnHover: true,
directionNav: true
});
} else{
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
controlNav: false,
pauseOnHover: true,
directionNav: true
});
}
};
Hope this helps!
Unable to replicate.
However, I did get this in my error console. If this is causing something else to pitch an error for you, then it could be interrupting the propagation of some jQuery events.
http://web2carz.rawdesigns.net/common/js/awkward.js Failed to load resource: the server responded with a status of 404 (Not Found)
If something in that script is vital, I can foresee issues.
I've noticed that IE7 is not supporting the "fade" animation. I don't know why.
Based on all the answers above, I edited the script call as follows, and it worked.
For good browsers, I have the "fade" effect and for IE7, I have the "slide" effect.
<script type="text/javascript">
$(window).load(function(){
if (window.navigator.userAgent.indexOf('MSIE 7.0;') > 0) {
$('.flexslider').flexslider({
animation: "slide"
});
} else {
$('.flexslider').flexslider();
}
});
</script>