jQuery Cycle plugin pause issue

Question

This following code runs perfectly for the slider to move from one image to next.

<script type="text/javascript">
    $('#slider').cycle({
        fx: 'shuffle',
        speed: 'fast',
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
    $('#pause').click(function() {
        $('#slider').cycle('pause');
    });
</script>

HTML:

<div id="wrapper">
    <div id="container">
        <div class="controller" id="prev"></div>
        <div class="controller" id="pause"></div>
        <div id="slider">
            <img src="~/XImages/18wheeler.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/2.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/3.jpg" width="660" height="420" alt="Flight 1">
        <div class="controller" id="next"></div> 
        </div>
</div>

I somehow can't pause the slider. Code isn't throwing any error in the browser. Can someone please guide.

Thanks

score 0 · Answer 1 · answered Sep 22 '18 at 17:13

0

It looks like click event on pause controller not bind. First, find out bind is workin

$('#pause').click(function() {
    console.log("Working!");
    $('#slider').cycle('pause');
});

If not, make sure you declare script after HTML rendered.

answered Sep 22 '18 at 17:13

Hoon

109
4

Your guess was correct. Click event wasn't binding before but as soon as I declared script after HTML rendered, Click event has started firing and 'working!' is now logging inside console. We have a new problem here though. A syntax error: `Uncaught TypeError: $(...).cycle is not a function` on line `$('#slider').cycle('pause');`. What does this mean now? – Sep 24 '18 at 06:25

Hary · Answer 2 · 2018-09-22T17:30:37.817

0

It is working fine. Also, you can use toggle as mentioned here.

$(function(){

 $('#slider').cycle({
        fx: 'shuffle',
        speed: 'fast',
        timeout: 3000,
        next:   '#next',
        prev:   '#prev'
    });
    $('#pause').click(function(e) {    
     $('#slider').cycle('toggle'); 
     
     $(this).text($(this).text() == "pause" ? "play" : "pause")
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>
<div id="wrapper">
    <div id="container">
        <div class="controller" id="prev">prev</div>
        <div class="controller" id="pause">pause</div>
        <div id="slider">
            <img width="100" height="100" alt="Flight 1" title="Flight 1">
            <img width="100" height="100" alt="Flight 1" title="Flight 2">
            <img width="100" height="100" alt="Flight 1" title="Flight 3">
        <div class="controller" id="next">next</div> 
        </div>
</div>

edited Sep 22 '18 at 17:30

answered Sep 22 '18 at 17:25

Hary

5,690
7
42
79

OK we are one step ahead now. At least `Click` event of `#pause` div is firing now. We have a new problem though. A syntax error: `Uncaught TypeError: $(...).cycle is not a function` on line `$('#slider').cycle('pause');`. What do you think is causing it? – Sep 24 '18 at 06:40
@Dad, Do you have this `jquery.cycle.all.js` included? Also, it needs to be included after `jQuery.js` – Hary Sep 24 '18 at 08:11
Yes. jQuery scripts are in order i.e., `jQuery.js` is placed before `jquery.cycle.all.js`. I did a bit of search and have found out the solution. I'm writing it in my answer in a bit. Thank you for your guidance. – Sep 24 '18 at 08:16

score 0 · Accepted Answer · 2018-09-25T07:35:58.157

First issue was failure to fire Click event of #pause. So declaring your script after HTML is rendered solved this issue as following:

<div id="wrapper">
    <div id="container">
        <div class="controller" id="prev"></div>
        <div class="controller" id="pause"></div>
        <div id="slider">
            <img src="~/XImages/18wheeler.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/2.jpg" width="660" height="420" alt="Flight 1">
            <img src="~/XImages/3.jpg" width="660" height="420" alt="Flight 1">
        <div class="controller" id="next"></div> 
        </div>
</div> 
<script type="text/javascript">
    jQuery(function($){
    $('#slider').cycle({
            fx: 'fade',
            speed: 'fast',
            timeout: 3000,
            next: '#next',
            prev: '#prev'
        });
    $('#pause').click(function () {
            console.log("Working!");
            $('#slider').cycle('toggle');
    })
    });
</script>

Second issue TypeError was due to conflicts in the libraries explained here:

https://stackoverflow.com/a/45739571/9934620

and this conflict issue has also been addressed successfully in the above code.

Hope it helps.

jQuery Cycle plugin pause issue

3 Answers3