JQuery revolution slider link to specific slide

Question

I am using the JQuery revolution slider on a website.

Everything works great but I need some help in linking to a specific slide.

After clicking on a navbar link I would like the slider to scroll to a specific slide (using an id or index maybe).

How can I implement this?

A simplified version of the code for the slider looks like this:

<div class="rev-slider-container">
    <div class="rev-slider">
        <ul>
            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>

            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide2" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>

            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide3" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>
        </ul>
    </div>
</div>

José Matos José Matos · Accepted Answer · 2018-08-17T14:03:23

Take a look at this https://www.themepunch.com/revsliderjquery-doc/api-methods-events/#methods.

You can navigate to a particular Slide by doing this:

revapi.revshowslide(2);

after loading the slider like this:

<script type="text/javascript">

    var revapi = jQuery(document).ready(function() {

        jQuery('#rev_slider_1').show().revolution({

            waitForInit: true,

            /* SLIDER SETTINGS CONTINUED */

        });
    });

    // only start the slider once the entire window has loaded
    jQuery(window).one('load', function() {

        revapi.revstart();

    });

</script>

JQuery revolution slider link to specific slide

1 Answers