1

I am trying to setup slider. When i connect jquery library just as <script src="></script> and connect slider code just as <script></script> with no require([ 'jquery', 'jquery/ui'], all works fine.

But when i try to connect script through magento jquery and delete link to jquery library, script won't work and shows error Uncaught ReferenceError: slide is not defined

Also when I am trying to connect custom jquery code via requirejs-config.js i got the same error.

So how make it works through right way (with no external jquery library)?

Here is part of HTML code:

<a href="javascript:slide('right');">LEFT</a>

Jquery code:

      require([ 'jquery', 'jquery/ui'], function ($){

            function slide(direction) {
                    var slider_full_width = $('.slides_box li').outerWidth() + 28;


                    if (direction == 'left') {
                        var left_sliding = parseInt($('.slides_box').css('left')) + slider_full_width;
                    } else {
                        var left_sliding = parseInt($('.slides_box').css('left')) - slider_full_width;

                    }

                    $('.slides_box:not(:animated)').animate({'left': left_sliding}, 350, function () {
                        if (direction == 'left') {
                            $('.slides_box li:first').before($('.slides_box li:last'));
                        }
                        else {
                            $('.slides_box li:last').after($('.slides_box li:first'));
                        }
                        $('.slides_box').css({'left': '0'});
                    });
                }
          });

EDIT: I have an idea why it don't work. Because after adding requirement of magento jquery it render my custom code inside $(document).ready(function() {, but javascript href works only outside of ready function. Anyway i don't know how to fix this.

1

Try following way:

<a href="javascript:void(0);" onclick="slide('right');">LEFT</a>
<script>
    require([ 'jquery', 'jquery/ui'], function ($){

        slide=function(direction) {
            var slider_full_width = $('.slides_box li').outerWidth() + 28;


            if (direction == 'left') {
                var left_sliding = parseInt($('.slides_box').css('left')) + slider_full_width;
            } else {
                var left_sliding = parseInt($('.slides_box').css('left')) - slider_full_width;

            }

            $('.slides_box:not(:animated)').animate({'left': left_sliding}, 350, function () {
                if (direction == 'left') {
                    $('.slides_box li:first').before($('.slides_box li:last'));
                }
                else {
                    $('.slides_box li:last').after($('.slides_box li:first'));
                }
                $('.slides_box').css({'left': '0'});
            });
        }
    });
</script>
  • The same error. – faik371 Jan 25 '17 at 17:04
  • It's tested code. Clear cache. It's working fine here. – Sohel Rana Jan 25 '17 at 17:08
  • Sorry, you are right. It works. Thank you. Is it problem only in href="javascript:void(0);" onclick="slide('right');"? – faik371 Jan 25 '17 at 17:19
  • Ok, i see a new variable in function. Thank you. – faik371 Jan 25 '17 at 17:23

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.