0

I am a web design student and fairly new to jQuery/Javascript so I know this is fairly basic, but everything I have tried has not worked. I am using unslider (unslider.com) on my main page and I am trying to pause the slider on a click event. The documentation on unslider.com shows that you can stop and start the slider based on the following code:

var slidey = $('.banner').unslider(),
data = slidey.data('unslider');

//  Pause Unslider
data.stop();

The problem I am having is that I am not sure how to access or utilize these predefined methods in my own js file. Here is the code I am trying, but it is not pausing the slider:

$(document).ready(function() {
    $('.button').click(function() { 
        var slidey = $('.banner').unslider(),
        data = slidey.data('unslider');

        data.stop();
    });
});

Any help with this would be greatly appreciated! Thanks

After the slider is stopped, I am trying to run the following functions:

$details_link = $('.active').data('url');

$('#inner_wrap').load($details_link, function() {
    $('.banner').slideToggle( "400", function() {
        $('body').toggleClass('no_scroll');
        $('#slider_btn').toggleClass('slider_btn_down slider_btn_up');
    });
});
Thad
  • 107
  • 1
  • 1
  • 8

2 Answers2

2

Here's a working fiddle.

Make sure that your JS is like so:

$(document).ready(function () {
  unslider = $('.banner').unslider();
  $('button.stop').on("click", unslider.data("unslider").stop);
});

Then in your HTML make sure that your button is like so:

<button class="stop">Stop the slider</button>

And you're all set.

In terms of utilizing methods from other JS files, just make sure that the location of the script tag for the library you want to use is before your own JavaScript so that the library loads before you can call one of its methods. Something like this, where application.js is your custom JavaScript:

<script src="jquery.js"></script>
<script src="unslider.js"></script>
<script src="application.js"></script>
knrz
  • 1,801
  • 1
  • 12
  • 15
  • This definitely worked, it has stopped the slider. Is there a way to run the following functions after it has stopped? I have tried adding a call back function at the end of your code, but I am doing something wrong. – Thad Jan 11 '14 at 00:42
  • It is not letting me add the code I am trying to run after the slider stops. – Thad Jan 11 '14 at 00:44
  • I was able to add the code I am trying to run in the original comment. I have never used .on("click", before so I think I am getting the call back function wrong. Thanks again for your help. – Thad Jan 11 '14 at 00:49
  • Use this, and add your own code afterwards. `$('button.stop').on("click", function () { unslider.data("unslider").stop(); });` – knrz Jan 11 '14 at 00:52
  • I really appreciate your help. I tried adding the code above in between the {}unslider brackets, but it didn't seem to work for me. My goal is to pause the slider, load the contents related to the active slide, and then slide the content up (hiding the slider until the button is clicked again). In my initial code, I got everything to work but the pause of the slider. Now based on your code, the pause is working but I am having a hard time running the rest of the jQuery. – Thad Jan 11 '14 at 01:00
0

As long as you have both javascript files linked within the same page, and the file that has the function you are calling is linked first, you will be able to call functions from other files, as described in this post:

Can we call the function written in one JavaScript in another JS file?

Community
  • 1
  • 1
Jerreck
  • 2,930
  • 3
  • 24
  • 42
  • The unslider js file is linked to the same html page as my js and it is loaded before my own js file, but it is not pausing when the button is clicked. Thanks for the response. – Thad Jan 11 '14 at 00:19