Multiple Slider

by Can

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<div id="slide-select">
    <a href="#" class="current" id="slider1">Slider 1</a>
    <a href="#" id="slider2">Slider 2</a>
    <a href="#" id="slider3">Slider 3</a>
</div>
<div id="slider-wrap">
    <ul class="slide-items" id="slider1-items">
        <li>Slider 1 Item Content 1</li>
        <li class="hide">Slider 1 Item Content 2</li>
        <li class="hide">Slider 1 Item Content 3</li>
    </ul>
    <ul class="slide-items hide" id="slider2-items">
        <li>Slider 2 Item Content 1</li>
        <li>Slider 2 Item Content 2</li>
        <li>Slider 2 Item Content 3</li>
    </ul> 
    <ul class="slide-items hide" id="slider3-items">
        <li>Slider 3 Item Content 1</li>
        <li>Slider 3 Item Content 2</li>
        <li>Slider 3 Item Content 3</li>
    </ul>
    
    <ul class="slider-nav">
        <li><a class="first" href="#">1.</a></li>
        <li><a class="second" href="#">2.</a></li>
        <li><a class="third" href="#">3.</a></li>
    </ul>
</div>

CSS

body {
    margin-top: 1em;
    font-family: "Droid Sans";
    color: #333;
    text-align: center;
    background: #e3e3e1 url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/dust.png) repeat
}

#slider-wrap ul:not(.slider-nav) {
    line-height: 400px;
    border-radius: 3px;
    height: 400px;
    margin: 10px 0;
    font-size: 48px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.1)
}

#slide-select a {
    text-decoration: none;
    text-shadow: 1px 1px 1px #fff;
    font-size: 18px;
    color: LightSlateGrey
}

#slide-select .current { 
    color: tomato
}

.slider-nav li {
    display: inline-block 
}

.slider-nav li a {
    text-indent:-9999px;
    text-decoration: none;
    display: block;
    border-radius: 100%;
    background: tomato;
    color: white;
    width: 10px;
    height: 10px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2)
}
.slider-nav .first {
    background: beige
}

.slider-nav .second {
    background: cyan
}

.slider-nav .current {
    background: black
}

.hide {
    display: none
}

JavaScript

$('#slide-select')
    .on('click', 'a', function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.addClass('current')
        .siblings()
        .removeClass('current');
    var $ul = $('#slider-wrap ul:not(.slider-nav)')
        .hide()
        .filter('#' + this.id + '-items');
    $ul.find('li')
        .hide()
        .eq(0)
        .show();
    $ul.fadeIn();
    $('.slider-nav li')
        .removeClass('current')
        .eq(0)
        .addClass('current');
});
$('.slider-nav')
    .on('click', 'a', function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.parent()
        .addClass('current')
        .siblings()
        .removeClass('current');
    $('.slide-items:visible li')
        .hide()
        .eq(parseInt($this.text(), 10) - 1)
        .fadeIn();
    });