Implementing a simple slider in code?

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?

Contents hide

Answers:

Method 1

Sample code

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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);
    });

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating