Function in not defined in custom jquery when using href=javascript

Question

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.

Answer 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>

• Deniss: The same error.
• Sohel Rana: It's tested code. Clear cache. It's working fine here.
• Deniss: Sorry, you are right. It works. Thank you. Is it problem only in href="javascript:void(0);" onclick="slide('right');"?
• Deniss: Ok, i see a new variable in function. Thank you.