I'm trying to slow down the speed of the slideshow. I'm looking in the stylesheet under #slides .features_pagination but none of the code there seems to have anything to do with the speed of the slideshow. I made some pics with text and people want more time to read them. Thanks
Official response from Jesse Haff
All v2 themes (Aware, Presence, Collective, CityZen, etc.) use Flexslider. Please refer to the official Flexslider documentation to learn how to control the behavior of the slider. View Flexslider documentation here.
All v1 themes use Slidesjs. Please refer to the official Slidesjs documentation to learn how to control the behavior of the slider. View Slidesjs documentation here.
Share this post
Showing 27 reactions
Sign in with
Unfortunately you would need to use Arya’s suggestion rather than just being able to adjust/insert the flexslider customization “slideshowSpeed:”. This is because the flexslider JS is loaded in a way that prevents us from being able to access it.
It’s definitely an extremely complicated process and it comes down to the fact that the featured content sliders in NationBuilder were not designed to be modified like this. The solution outlined here (and in more detail by Arya below) is just a workaround solution, or a “This is hard but if you absolutely need to change this then this is how to do it” method.
However, the folks here at NationBuilder who make changes to our themes are always open to suggestions for improvements, so if you’d like to see a more easily editable Featured Content Slider in the future, I recommend suggesting it at nationbuilder.com/suggest.
I’m sorry about that!
You can read more about the slider plugin we use here: http://slidesjs.com/ – there is documentation available there, but customization requires knowledge of javascript.
Certified Architect
Certified Expert
Certified Architect
Certified Expert
The solution I can think off is override the feature function….Not sure if we have a better way to change it.
/*------------------------------------*/ /* Flex Slider Target /*------------------------------------*/ if (jQuery().flexslider) { $('.flexslider').flexslider({ slideshowSpeed: 9000, animationduration: 1000, }); }Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
animation: “fade”, //String: Select your animation type, “fade” or “slide”
Thanks, Dirk
I disabled NationBuilder’s initialization of flexslider by changing the _features.html classes and ids of “page-features” and “feature-slides” to custom ones (don’t forget to change them in the scss files as well!). Then, I inputted my own init custom script with the help of the http://www.woothemes.com/flexslider/ options: $(window).load(function() { $(‘#flex-feature-slides’).flexslider({ animation: “fade”, slideshowSpeed: 7000, animationSpeed: 600, prevText: "", nextText: "", start: function() { $(‘.slider-loading’).remove(); $(‘.flex-slides .slides’).css({"visibility": "visible"}); } }); });
The jquery in the “start” function is there to remove the loading gif and make all the slides visible when flexslider has fully initialized.
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
Take a look over at http://www.woothemes.com/flexslider/. That’s where we grabbed the code and files to change the slider to a fader.
Hope that helps.
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
It is doable. We did it with http://www.gohconservative.com/ I am on a deadline for tomorrow but I’ll try to post the jquery on Wednesday.
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer
<script type=“text/javascript” src=“/javascripts/jquery.backstretch.min.js”></script>
<script type=“text/javascript”>
$j.backstretch(“{{ site.background_image_url }}”, {speed: 0});
</script>
to just under the {{ content for header }} tag and then paste the above script after it.
Certified Architect
Certified Developer
A developer familiar with NationBuilder should be able to solve this. Email me at <b>[email protected]</b> if you would like support. Or, next time I’m working on something like this, I’ll see if I can post a more helpful comment.
Certified Architect
Certified Developer