Question

SLIDER CODE
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

IMAGE MOCK:

I’d like to preface this by saying I’m not a dev, I’m a designer and know next to nothing about JavaScript. On top of that, it’s been about ten years since I’ve done any web work. I’ve got a slider-based site I’m cobbling together and I’d like to add or modify some functionality to the slider. The slider is invoked at the end the HTML file with

<script type="text/javascript">
        $(function() {
        
            $('#da-slider').cslider();
        
        });
    </script>

I’d like to add text buttons, as seen in the picture, that will change the page of the slider. The slider generates buttons that are but do not contain text as I would like. Currently I have the text buttons as anchors with for example

<a href="#" onClick="$('#da-slider').cslider({current:2});"><p>Live PA</p></a>

but it creates a new slider at that page instead of changing the one that is already running. Is there a way to pass this value to the one that is already running? Is this a problem of scope? Am I just using the wrong syntax to pass to an existing instance? I tried looking for the code associated with the button spans but all I can find is the spot where they’re created, but not how the clicks are handled. I think it’s using jQuery which I’m not familiar with. Note the slider is jQuery-based, so that’s loaded as well.

Answer 1

Your call is initializing a new cslider instance.

Looking at the source code they have a method page for changing the current page. Using the usual notation for jQuery you can change the page to the second page by doing:

    $('#da-slider').cslider('page', 2);