Acelasi Eu Acelasi Eu - 2 months ago 25
Javascript Question

Parallax content slider autoplay not working

Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:

<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>


Those are in
<head>
. Here is the body:

<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>

</div>

</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>

<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>

<!--/slide -->
</div>


and here is the jquery:

$(document).ready(function () {
$('#da-slider').cslider({

current: 4,
// index of current slide

bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off

interval: 500
// time between transitions

});
});


Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!

Answer

Try this

$(document).ready(function () {
    $('#da-slider').cslider({

        current: 4,
        // index of current slide

        bgincrement: 50,
        // increment the background position
        // (parallax effect) when sliding
        circular: true,
        autoplay: true,
        // slideshow on / off

        intervalSec: 500
        // time between transitions

    });
});

I have just changed name of value interval to intervalSec

as per the documentation other things should be okay

Also in the provided link of website you are using older version of jQuery v1.8.3 If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)

Update: In the given website Link there are two JQuery UI of different versions used

  1. jQuery-UI 1.9.2
  2. jQuery-UI 1.9.1

Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..