› NewsFrame Pro Advanced Slider Control

NewsFrame Pro Advanced Slider Control

Email this to someoneShare on Facebook0Share on Google+0Share on LinkedIn0Share on Tumblr0Share on StumbleUpon0Tweet about this on TwitterShare on Reddit0Pin on Pinterest0

nfpro-business-sliderNote:  this tutorial applies only to the NewsFrame Pro Business Version. Please contact me if you’ve purchased the base version but need to upgrade to the Business Version – I will be happy to issue you a credit so you only have to pay the difference.

The NewsFrame Pro theme options panel includes two options for the home page slider: stacked and columnized. If you wish to to change other settings for the slider, such as the transition animation or transition speed, you’ll need to create a child theme and override the slider initiation script.

Please make sure you have a working child theme by following this tutorial before proceeding.

Once your basic child theme is set up, you’ll want to add two files to the child theme directory.

The first file, functions.php, does not override the parent theme’s functions.php file, but is instead loaded before it. The second file is the replacement slider initiation script, which will let you override the default options.

NewsFrame Pro uses the awesome Liquid Slider for the responsive home page slider. Feel free to browse the Liquid Slider documentation to help you configure or change additional settings.

In this tutorial, we’ll be changing the slider transition speed — which is set at 6000 milliseconds by default.

1) Set up your functions.php file, and add it to your child theme directory. Use the following as a guide:

<?php
// dequeues the slider init script and adds a custom script
function nfprobusiness_custom_slider_script() {
	// registers our new custom script
	wp_register_script('nfprobusiness-custom-slider-init', get_stylesheet_directory_uri() . '/custom-slider-init.js', array('jquery'), '1.3', true);
	// dequeues the default script
	wp_dequeue_script( 'nfprobusiness-liquid-slider-init' );
	// enqueues the new script
	wp_enqueue_script ('nfprobusiness-custom-slider-init');
}
add_action( 'wp_enqueue_scripts', 'nfprobusiness_custom_slider_script', 100 );

2) Create your new slider initiation script. Name it custom-slider-init.js. In this example, we are setting the transition value (autoSlideInterval) to 10000 milliseconds, to transition the slider every 10 seconds as opposed to the default six seconds. Please view the Liquid Slider documentation for more examples.

jQuery('#main-slider').liquidSlider({
	dyanamicArrowsGraphical: true,
	preloader: true,
	autoSlideInterval: 10000,
	onload: function() {
    jQuery('.liquid-slider, .slide').css('visibility', 'visible');
  }
  });

3) Load up and activate your child theme via the admin panel. The NewsFrame Pro Business Version slider now transitions in 10 seconds rather than the default six seconds.

Subscribe for weekly tutorials