Implementing a simple slider in code?

Question

Here's where I'm at. Have inserted this into a page's html code:

<div id="stgSlideshow">
   <div>
     <img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/AdjustedA2600-scaled.jpg">
   </div>
   <div>
     <img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/cropped-Zen-Gardens-Gallery-1-scaled-1.jpg">
   </div>
   <div>
     Test text here...
   </div>
</div>

Have added the CSS below via Customise>Additional CSS:

/* SLIDER */
#stgSlideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#stgSlideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

Lastly, I have updated my Header.php file to include some javascript to rotate the slides:

<?php
/**
 * The header.
 *
 * This is the template that displays all of the <head> section and everything up until main.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
    <script>
        $(function() {
            $("#stgSlideshow > div:gt(0)").hide();
            setInterval(function() { 
                $('#stgSlideshow > div:first')
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo('#stgSlideshow');
            },  3000);
        });
    </script>   
    <?php wp_head(); ?>
    
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>

    <?php get_template_part( 'template-parts/header/site-header' ); ?>

    <div id="content" class="site-content">
        <div id="primary" class="content-area">
            <main id="main" class="site-main" role="main">

Sadly, not working. Any ideas?

Pat J · Accepted Answer · 2021-03-06 21:34:11Z

First off, you shouldn't insert <script> tags into WordPress's template files. The proper way to add Javascript code is to use wp_enqueue_script().

If I'm reading this right, it appears you're using jQuery code, so you'll need to ensure that jquery is in the $deps array in your wp_enqueue_script() call.

Also, WordPress uses jQuery in noConflict mode, which means you need to either a) do a bit of extra work to ensure that $ is available, or b) replace $ with jQuery in your code.

Sample code

You can add this to your active theme's functions.php file.

functions.php

add_action( 'wp_enqueue_scripts', 'wpse384608_slider_script' );
function wpse384608_slider_script() {
    wp_enqueue_script( 
         'my-slider',
         get_stylesheet_directory_uri() . '/js/slider-script.js',
         array( 'jquery' ),
         '1.0.0',
         true
    );
}

The last parameter in the wp_enqueue_script() call, the true, tells WordPress to load the script in the page's footer. If you need it loaded in the header, change this to false.

You'll need to move the JS code in your question to a file in your theme, at {theme root}/js/slider-script.js.

js/slider-script.js

jQuery(function() {
        jQuery("#stgSlideshow > div:gt(0)").hide();
        setInterval(function() { 
            jQuery('#stgSlideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#stgSlideshow');
        },  3000);
    });

Thanks for the reply + whoa - this just got a whole lot more complicated! Reading through the enque script link, but it's a little baffling. What would example code look like? — stigzler
– stigzler, Commented Mar 6, 2021 at 18:08
I've added some sample code. You may need to tweak it for your particular use, but it should be a good starting point. — Pat J
– Pat J, Commented Mar 6, 2021 at 21:24

Stack Exchange Network

Implementing a simple slider in code?

1 Answer 1

Sample code

Your Answer

Hot Network Questions

Implementing a simple slider in code?

1 Answer 1

Sample code

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions