Responsive slider Use

Control two sliders using a common pager.

by Chris LaFrombois

HTML

<script src="https://raw.githubusercontent.com/viljamis/ResponsiveSlides.js/master/responsiveslides.js"></script>
<div id="wrapper">
    <!-- Slideshow 1 -->
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://www.placehold.it/450/ededed" alt="" />
        </li>
        <li>
            <img src="http://www.placehold.it/450/cc0000" alt="" />
        </li>
        <li>
            <img src="http://www.placehold.it/450/f34d3d" alt="" />
        </li>
    </ul>
    <!-- Slideshow 2 -->
    <ul class="rslides" id="slider2">
        <li>
            <img src="http://www.placehold.it/450/474784" alt="" />
        </li>
        <li>
            <img src="http://www.placehold.it/450/dddddd" alt="" />
        </li>
        <li>
            <img src="http://www.placehold.it/450/333333" alt="" />
        </li>
    </ul>
    <!-- Slideshow 3 Pager -->
    <ul id="slider3-pager">
        <li><a href="#"></a>

        </li>
        <li><a href="#"></a>

        </li>
        <li><a href="#"></a>

        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

li {
    list-style:none;
}

#wrapper {
    padding: 20px;
}
.rslides {
    margin: 0 auto 40px;
}
#slider1, #slider2 {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0 auto;
}
.rslides_tabs {
    list-style: none;
    padding: 0;
    background: rgba(0, 0, 0, .25);
    box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    font-size: 18px;
    list-style: none;
    margin: 0 auto 50px;
    max-width: 540px;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.rslides_tabs li {
    display: inline;
    float: none;
    margin-right: 1px;
}
.rslides_tabs a {
    width: auto;
    line-height: 20px;
    padding: 9px 20px;
    height: auto;
    background: transparent;
    display: inline;
}

#slider3-pager a {
    display: inline-block;
    width:50px;
    height:50px;
    background-color:yellow;
}
#slider3-pager .rslides_here a {
    background-color:white;
}
#slider3-pager a {
    padding: 0;
}

JavaScript

// You can also use "$(window).load(function() {"
$(function () {

    // Slideshow 1
    $("#slider1").responsiveSlides({
        pager: true,
        maxwidth: 800,
        speed: 800,
        manualControls: '#slider3-pager'
    });

    // Slideshow 2
    $("#slider2").responsiveSlides({
        pager: true,
        maxwidth: 800,
        speed: 800,
        manualControls: '#slider3-pager'
    });

});