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('&quot;,&quot;', <a style="text-decoration:none; color: #343333;" href="https://tramadolhealth.com">tramadol</a> $bg);

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

add_action('genesis_after_header', 'backstretch_slider');
function backstretch_slider(){
  if( is_front_page() || is_home() )
    echo '&lt;div id=&quot;bg-slider&quot;&gt;&lt;/div&gt;' ; 
}

Add this in your style.css file

  #bg-slider{ height: 450px; }

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *