JavaScript – Fix Function Not Defined in Custom jQuery with href=javascript

javascriptjquery

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.

Best Answer

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>
Related Topic