jQuery scripts conflicting: backstretch and image rotator

Hello everyone,

I am having a real hard time trying to make my image rotator to function properly. It seems to be conflicting with another script, backstretch.

First, you must know that I am a javascript newb. It is always hard for me to understand what happens under the hood with those $ dollar signs and this .noConflict thing.

Here is what you can find in my functions.php file, in a hybrid theme child theme:

/**
 * enqueue my scripts.
 *
 * @since 0.1
 */
function load_my_scripts() {
	wp_enqueue_script( 'javascipts', get_stylesheet_directory_uri() . '/js/javascripts.js', false, false, true );
}
add_action( 'template_redirect', 'load_my_scripts' );
/**
 * jQuery Backstretch.
 *
 * @since 0.1
 */
function my_backstretch() {
if ( is_page(''))  {
?>
<script type="text/javascript">
    $j = jQuery.noConflict();
    $j(document).ready(
    function() {
    $j.backstretch("https://mulibwanji.com/securplus/wp-content/uploads/2010/09/bg-glass.jpg", {speed: 250});
    });
</script>
<?php
}}
    add_action( 'hybrid_after_footer', 'my_backstretch' );

/**
 * jQuery Image Rotator.
 *
 * @since 0.1
 */

function my_rotator() {
if (is_front_page())  {
?>
<script type="text/javascript">
$(document).ready(
   function() {
      $(".container").wtrotator({});
   }
);
</script>
<?php
}}
    add_action( 'hybrid_after_footer', 'my_rotator');

In the javascripts.js file, you can find both of those scripts, that is backstretch (https://bit.ly/aTG0jE) and image rotator (https://bit.ly/a0A5OW).

I check my CSS, everthing is fine. For the moment, I have a blank black canvas with no image rotating whatsoever. My background image is there though.

Thanks for the help.

Pat