0

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?

  • Could you post the js error? – Khoa TruongDinh Nov 3 '18 at 15:17
  • Hi Khoa, it just says undefined value. I seem to recall having this issue on Magento previously, is it something to do with the $ sign?... – YorkieMagento Nov 3 '18 at 15:34
  • from below solution, any worked for you ? – Pawan Nov 3 '18 at 17:06
  • @YorkieMagento, can you please post whole js error from console ? – Shashank Kumrawat Nov 3 '18 at 19:30
1
You can put your script in require.

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

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>
  • Hi Aman, the above not working for me. Updated question with error I get. – YorkieMagento Nov 4 '18 at 7:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.