Jquery function call issue Magento 2

Question

I am attempting to create a basic text slider, which works perfectly well on a plain html page. However, when I move it to my Magento 2 site, I get an undefined error for this piece of javascript.

HTML

    <div id="carousel">
     <div class="btn-bar" style="display:none;">
       <div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> 
      </div></div>
    <div id="slides">
        <ul>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase">
                    MY FIRST MESSAGE
                    </p>
                </div>
            </li>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase">
                    MY SECOND MESSAGE
                    </p>
                </div>
            </li>
        </ul>
    </div>

SCRIPT

$(document).ready(function () {
    //rotation speed and timer
    var speed = 5000;

    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();


    //if user clicked on prev button

    $('#buttons a').click(function (e) {
        //slide the item

        if (container.is(':animated')) {
            return false;
        }
        if (e.target.id == previous) {
            container.stop().animate({
                'left': 0
            }, 1500, function () {
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();
            });
        }

        if (e.target.id == next) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }

        //cancel the link behavior            
        return false;

    });

    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });


    function resetSlides() {
        //and adjust the container so current is in the frame
        container.css({
            'left': -1 * item_width
        });
    }

});
//a simple function to click next link
//a timer will call this function, and the rotation will begin

function rotate() {
    $('#next').click();
}

Console Error

(index):747 Uncaught ReferenceError: $ is not defined
    at (index):747
(anonymous) @ (index):747

Can anyone please suggest an edit to get this working?

Answer 1

You can put your script in require.

<script>
    require([
        'jquery'
    ], function($){
           // put code here
    });
</script>

Answer 2

Your code format should look like this and don't need ready function.

<script>
require([
    'jquery',
    'domReady!'
], function($){
    'use strict';

    //Your jquery codes
});
//independet functions should be here
</script>

==========================================================

Your code should look like this.

<script>
require([
    'jquery',
    'domReady!'
], function($){
    'use strict';

    //rotation speed and timer
    var speed = 5000;

    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();


    //if user clicked on prev button

    $('#buttons a').click(function (e) {
        //slide the item

        if (container.is(':animated')) {
            return false;
        }
        if (e.target.id == previous) {
            container.stop().animate({
                'left': 0
            }, 1500, function () {
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();
            });
        }

        if (e.target.id == next) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }

        //cancel the link behavior            
        return false;

    });

    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });
});
function resetSlides() {
    //and adjust the container so current is in the frame
    container.css({
        'left': -1 * item_width
    });
}
</script>