I am using this script to add responsive slideshows to a little website. I have not found a perfect slideshow script yet, and I doubt it exists. I have come from owl-slider, flux-slider to jquery basic slider, and now I have arrived at responsiveslides.js (responsiveslides.com / https://github.com/viljamis/ResponsiveSlides.js)
My Problem is, that I cannot get the auto-setting to work. This is my code to fire the plugin:
$(".rslides_home").responsiveSlides({
'pause':true
});
This setting should stop the animation, I only want it to slide per click. But it doesnt do a thing. Changing the default settings does the job though.
Has anyone an Idea how to solve that?
You are using the wrong option. "Pause" has a different meaning in the slider.
Auto-option defines if the slider is autoplaying.
$(".rslides_home").responsiveSlides({
auto: false
});
Here are the defined options for the slider. As you can see, the "pause" option is used when you want the slider to stop when hovered.
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
These options are taken from http://responsiveslides.com/
Related
bxSlider has a function to reload slider(s) at a specific action. I initialise multiple sliders on my page in the following way:
jQuery('.product_carousel_images').each(function(index,item) {
jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
});
Using jQuery easytabs for a tab layout, the first slider is in the first (i.e. visible) tab and working well, while the second is generated in an initially hidden div. Since bxSlider sets the height of a slider within a div with display:none to 0, the second slider has zero-height images. visibility:hidden isn't an option, since the tabs interface doesn't allow for that.
With this multiple slider function, how can I trigger a reload of my sliders on a specific action, like clicking a tab header?
I don't use bxSlider myself, however I'm guessing you can make use of bxSlider's "reloadSlider" function.
http://bxslider.com/examples/reload-slider
Just keep a reference to your slider at initialization, then call reloadSlider on it whenever you change tabs, which in your case with easy tabs would have to make use of the easytabs:after event.
var slider = jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
// Reload slider whenever tab changes
$('#your-tabs-container').bind('easytabs:after', function() {
// TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed
slider.reloadSlider();
});
More information on EasyTabs' Event Hooks here:
https://os.alfajango.com/easytabs/#configuration
I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE.
The link is here http://www.secureshop.gr/POOL/citycars/website
Thank you in advance.
Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.
As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: '', // Prev directionNav text
nextText: '', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
</body>
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.
If you have Anything slider setup on a page like something like so
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 5000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
navigationFormatter: formatText
});
How can you later change an individual property - say delay=10000?
You can use the API to access the options. In the newest version .anythingSlider isn't the element to initialize AnythingSlider on, it ends up being named as .anythingBase.
$('#slider').data('AnythingSlider').options.delay = 10000;
I'll update the usage wiki page to show this more explicitly.
I have a JSON encoded object that has been localized and ultimately will fill-in a JS file for options. The expected output of the options are (the defaults and the explanation of the "type" it is looking for):
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
My current HTML output of the JSON encoded object is:
/*<![
CDATA[
*/varflexslider_vars=[
];flexslider_vars={
"js_animation": "fade",
"js_slide_direction": "horizontal",
"js_slideshow": "1",
"js_slideshow_speed": "7000",
"js_animation_duration": "600",
"js_direction_nav": "1",
"js_control_nav": "1",
"js_keyboard_nav": "1",
"js_mousewheel": null,
"js_prev_text": "Prevous",
"js_next_text": "Next",
"js_pause_play": null,
"js_pause_text": "Pause",
"js_play_text": "Play",
"js_randomize": null,
"js_slide_start": "0",
"js_animation_loop": "1",
"js_pause_on_action": "1",
"js_pause_on_hover": null,
"js_controls_container": "",
"js_manual_controls": "",
"js_start_function": "function(){}",
"js_before_function": "function(){}",
"js_after_function": "function(){}",
"js_end_function": "function(){}"
};/*
]
]>*/
and this is how I am currently (and unsucessfully) adding in those options to the JS file:
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: flexslider_vars.js_animation, //String: Select your animation type, "fade" or "slide"
slideDirection: flexslider_vars.js_slide_direction, //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: flexslider_vars.js_slideshow, //Boolean: Animate slider automatically
slideshowSpeed: flexslider_vars.js_slideshow_speed, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: flexslider_vars.js_animation_duration, //Integer: Set the speed of animations, in milliseconds
directionNav: flexslider_vars.js_direction_nav, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: flexslider_vars.js_control_nav, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: flexslider_vars.js_keyboard_navjs_mousewheel, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: flexslider_vars.js_mousewheel, //Boolean: Allow slider navigating via mousewheel
prevText: flexslider_vars.js_prev_text, //String: Set the text for the "previous" directionNav item
nextText: flexslider_vars.js_next_text, //String: Set the text for the "next" directionNav item
pausePlay: flexslider_vars.js_pause_play, //Boolean: Create pause/play dynamic element
pauseText: flexslider_vars.js_pause_text, //String: Set the text for the "pause" pausePlay item
playText: flexslider_vars.js_play_text, //String: Set the text for the "play" pausePlay item
randomize: flexslider_vars.js_randomize, //Boolean: Randomize slide order
slideToStart: flexslider_vars.js_slide_start, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: flexslider_vars.js_animation_loop, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: flexslider_vars.js_pause_on_action, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: flexslider_vars.js_pause_on_hover, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: flexslider_vars.js_controls_container, //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: flexslider_vars.js_manual_controls, //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: flexslider_vars.js_start_function, //Callback: function(slider) - Fires when the slider loads the first slide
before: flexslider_vars.js_before_function, //Callback: function(slider) - Fires asynchronously with each slider animation
after: flexslider_vars.js_after_function, //Callback: function(slider) - Fires after each slider animation completes
end: flexslider_vars.js_end_function //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
So - the issue is not calling the options themselves (that seems to work fine), it's altering the actual output (a string, boolean, integer, etc) based on the needed values of the JS file, because as of right now, it's doing diddly squat because of it. I'd appreciate any nudges in the right direction. Thanks!