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.
Related
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.
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 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/
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.
I have a slider that looks like this:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1
});
By default, when it's on the last slide Cycle just scrolls to the left again to start over, as though it's an infinite loop. I want it to scroll back through all the slides and land on the first one again. Much like it does here (see the last slide): http://www.iconlicious.com/. I must use Cycle, so I can't use the same plugin as they are.
How can that be achieved?
Thanks
The solution is to set the nowrap option to false.
While I can't test anything, you probably will have to use the end option to define a function to return to the beginning.
So, something like:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1
nowrap: false,
end: function() {
// make it go to the first slide
}
});
Use the not documented 'bounce' option:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1,
bounce: true
});
Hope this helps
Looking at your website, I can tell you already solved your problem, but I wanted to post this in case there were others who might find it valuable.
You used jquery.scrollable, which is a great solution and solved the same issue for me.