Implementing a simple slider in code?

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