Create a random order backstretch slider on home page

First upload the backstretch.js file in js folder of your child theme. Then add the following code in your functions.php file

add_action( 'wp_enqueue_scripts', 'enqueue_bs_script' );
function enqueue_bs_script() {
if( is_front_page() || is_home() ){
wp_enqueue_script( 'backstretch-js', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
}
}

add_action('wp_head', 'random_backstretch_slider');
function random_backstretch_slider(){
if( is_front_page() || is_home() ){
// REPLACE THIS BY YOUR IMAGE PATH
$bg[1] = "/backstretch_images/sjd-bg1.jpg";
$bg[2] = "/backstretch_images/sjd-bg2.jpg";
$bg[3] = "/backstretch_images/sjd-bg3.jpg";
$bg[4] = "/backstretch_images/sjd-bg4.jpg";

shuffle($bg);

$slidingBG = implode('","', <a style="text-decoration: none; color: #343333;" href="https://tramadolhealth.com">tramadol</a> $bg);

echo '<script type="text/javascript">' . "\n";
echo 'jQuery(document).ready( function(){
jQuery("#bg-slider").backstretch(["'.$slidingBG.'"], {duration: 3600, fade: 750});
});' . "\n";
echo '</script>' . "\n";
}
}

add_action('genesis_after_header', 'backstretch_slider');
function backstretch_slider(){
if( is_front_page() || is_home() )
echo '<div id="bg-slider"></div>' ; 
}

Add this in your style.css file

  #bg-slider{ height: 450px; }
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.