Demo Custom content slider

by itzmeamar

HTML

<script src="https://sites.google.com/site/amarzr21/js/customcontent.js"></script>
<div id="hero-slider">
    <ul>
        <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
        <li><a href="#" rel="#panel-2">Item 2</a></li>
        <li><a href="#" rel="#panel-3">Item 3</a></li>
    </ul>
    <div class="mask">
        <div class="slider-body">
            <div class="panel" id="panel-1">
                <h2>Title 1</h2>
                <p>Paragraph</p>
            </div>
            <div class="panel" id="panel-2">
                <h2>Title 2</h2>
                <p>Paragraph</p>
            </div>
            <div class="panel" id="panel-3">
                <h2>Title 3</h2>
                <p>Paragraph</p>
            </div>
        </div>
    </div> <!-- .mask -->
    <div class="clear"></div>
</div> <!-- #hero-slider -->

CSS

#hero-slider {
    text-align:left; 
    background-color:#efefef; 
    border:1px solid #ccc; width:450px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    margin:0 auto;
    font-family:arial;
}
 
#hero-slider .mask { 
    float:left; 
    width:300px; 
    height:280px; 
    margin:15px 0 0 10px; 
    overflow:hidden;
}
 
#hero-slider .panel { 
    width:300px; 
    height:280px; 
    text-align:left;
}
 
#hero-slider ul {
    margin:0; 
    padding:15px 15px 0 15px; 
    list-style:none; 
    float:left; 
    border-right:1px solid #dedede; 
    height:285px;
}
 
#hero-slider ul li {
    margin:10px 0;
}
 
#hero-slider ul a {
    outline:none; 
    text-decoration: underline;
    display:block;
    width:75px; 
    height:74px; 
    text-indent:-999em; 
}
 
#hero-slider a {
    background: url(https://sites.google.com/site/amarzr21/images/button.png) no-repeat 0 0;
}
 
#hero-slider ul a.active {
    background-position: -75px;
}
 
.panel h2 {
    padding:15px 0 0 0;
    color:#0058a9;
}
 
.panel p {
    color:#666;
}
 
.clear {clear:both}

JavaScript

//append click event to the UL list anchor tag
$('#hero-slider ul a').click(function () {
     
    //reset all the items
    $('#hero-slider ul a').removeClass('active');
         
    //set current item as active
    $(this).addClass('active'); 
         
    //scroll it to the right position
    $('.mask').scrollTo($(this).attr('rel'), 300);
         
    //disable click event
       return false;        
         
});