How to pass the argument to the jQuery slider function on page load in following scenario?

Question

I've used one image slider. In HTML code of this jQuery image slider there is one hidden field which contains the numerical value. This numerical value is nothing but the time in seconds for which each slider image should display. Once the time finishes the next image will display.

The HTML and jQuery code for it is as follows :

HTML code :

<input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">
<div class="leaderboard">
  <ul id="demo1">
    <li><a href="#slide1"><img src="img/Slid1.png" alt="Lorem Ipsum"></a></li>
    <li><a href="#slide2"><img src="img/Slid2.png"  alt="Lorem Ipsum"></a></li>
    <li><a href="#slide3"><img src="img/slid3.png" alt="Lorem Ipsum"></a></li>
  </ul>
</div>

jQuery code :

$(function() {
  var demo1 = $("#demo1").slippry({
    transition: 'fade',
    useCSS: true,
    speed: 1000,
    pause: 3000,
    auto: true,
    preload: 'visible'
  });
  $('.stop').click(function () {
    demo1.stopAuto();
  });
  $('.start').click(function () {
    demo1.startAuto();
  });
  $('.prev').click(function () {
    demo1.goToPrevSlide();
    return false;
  });
  $('.next').click(function () {
    demo1.goToNextSlide();
    return false;
  });
  $('.reset').click(function () {
    demo1.destroySlider();
    return false;
  });
  $('.reload').click(function () {
    demo1.reloadSlider();
    return false;
  });
  $('.init').click(function () {
    demo1 = $("#demo1").slippry();
    return false;
  });
});

The necessary jQuery and CSS files have been already included.

For passing the value of hidden field as a n argument to the slider function I tried the code below in same file but it didn't work out for me.

$(document).ready(function() {
  var val = $('#brand_slider_time').val() * 1000;
  demo1.destroySlider();
  demo1 = $("#demo1").slippry({
    pause: val
  });
});

I wrote this code above the slider function code in a same file.

How should I pass this value of 10 seconds to the jQuery slider function and use this value into a function such that each image from slider will appear for 10 seconds?

Thanks for spending some of your valuable time in understanding my issue. If you need any more information regarding this issue please let me know.

Any kind of hep would be highly appreciated. Waiting for your precious replies.

after `var val = $('#brand......')` write `alert(val);` is it giving 10000 ? — Pratik Joshi, Sep 28 '14 at 06:47

Pratik Joshi · Accepted Answer · 2014-09-28T07:16:18.210

I perfectly made it work by taking hidden field value FIDDLE

apply pause: 10000,

Here it means 10 second pause,then next image.

Try modified code . And enjoy :) I checked and it worked .10 secs. per img

<!DOCTYPE html>
<html>
    <head>
        <title>slippry demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="../dist/slippry.min.js"></script>
        <script src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script>
        <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../dist/slippry.css">
    </head>
    <body>      
        <section class="demo_wrapper">
            <article class="demo_block">
                <input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10">

                <h1>Simple demo with default setups</h1>
                <a href="#glob" class='prev'>Prev</a> / <a href="#glob" class='next'>Next</a> 
        || <a href="#glob" class='init'>Init</a> | <a href="#glob" class='reset'>Destroy</a> | <a href="#glob" class='reload'>Reload</a>
        || <a href="#glob" class='stop'>Stop</a> | <a href="#glob" class='start'>Start</a>
            <ul id="demo1">
                <li><a href="#slide1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
                <li><a href="#slide2"><img src="img/image-2.jpg"  alt="This is caption 2"></a></li>
                <li><a href="#slide3"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
            </ul>
            </article>
        </section>      

        <script>
            $(function() {
                var demo1 = $("#demo1").slippry({
                    transition: 'fade',
                    useCSS: true,
                    speed: 1000,
                    pause: $('#brand_slider_time').val() * 1000,
                    auto: true,
                    preload: 'visible'
                });

                $('.stop').click(function () {
                    demo1.stopAuto();
                });

                $('.start').click(function () {
                    demo1.startAuto();
                });

                $('.prev').click(function () {
                    demo1.goToPrevSlide();
                    return false;
                });
                $('.next').click(function () {
                    demo1.goToNextSlide();
                    return false;
                });
                $('.reset').click(function () {
                    demo1.destroySlider();
                    return false;
                });
                $('.reload').click(function () {
                    demo1.reloadSlider();
                    return false;
                });
                $('.init').click(function () {
                    demo1 = $("#demo1").slippry();
                    return false;
                });
            });
        </script>
    </body>
</html>

yes,exactly you got my point. But how should I pass this value to the function? What change to my code I need to make? — PHPLover, Sep 28 '14 at 06:49
Give fiddle where i can see. Currently i cant debug as u didnt giv me fiddle — Pratik Joshi, Sep 28 '14 at 06:51
As I'm making use of some external js and css I can't create a fiddle for it. Also my slider is working perfect. I just want a solution for how to pass this argument to the slider function? — PHPLover, Sep 28 '14 at 06:53
there is option to put external js, and css. And wat u r using is correct way, how can i debug where its going wrong ??? If u dont want answer , dont post fiddle , if you want post it , its simple. — Pratik Joshi, Sep 28 '14 at 06:57

How to pass the argument to the jQuery slider function on page load in following scenario?

1 Answers1