CC-Home

by thcipriani

HTML

<div class="container_16">
    <div id="frame" class="grid_16">
        <div id="slideHolder">
            <div class="slide" id="slide1">
        <img src="http://www.customchannels.net/img/music_for_your_business.png" alt="Custom Music for your Business">


            <h3>Enhance Your Brand With Sound Marketing.</h3>


            <a href="#">

                <img src="http://www.customchannels.net/img/learn_more.png" alt="learn more">

            </a>


            <a href="#">

                <img src="http://www.customchannels.net/img/watch_a_video.png" alt="watch a video">

            </a>
            </div><!--end .slide 1-->
            <div class="slide" id="slide2">
         <img src="http://www.customchannels.net/img/music_for_your_business.png" alt="Custom Music for your Business">


            <h3>Enhance Your Brand With Sound Marketing.</h3>


            <a href="#">

                <img src="http://www.customchannels.net/img/learn_more.png" alt="learn more">

            </a>


            <a href="#">

                <img src="http://www.customchannels.net/img/watch_a_video.png" alt="watch a video">

            </a>
            </div><!--end slide 2-->
        </div><!--end #callout-->
    </div><!--end .grid_16-->
</div><!--end container_16">-->
 <a id="button-next-slide" href="#">Click to slide</a>

CSS

body, html{width:100%;height:100%;margin:0;padding:0; 
}
.container_16{width:370px; margin:0 auto;}
.grid_16{width:350px; float:left; margin:0 10px;}
#frame{height:129px; overflow:hidden; position:relative;}
#slideHolder{width:700px; position:relative;}
.slide{float:left; position:relative;}

JavaScript

var slideArr = ['#slide1','#slide2'];
var n = $(".slide").length;
var selectedSlide = 0;
var transLock = false;

function moveToSlide(id)
{
    $('#slideHolder').animate({'left':-(id * 350) + 'px'},750,'swing', function(){
         transLock = false;   
    });   
}

$('#button-next-slide').click(function(){
    alert(n);
   if (transLock) return; 
       else transLock = true;
    
   selectedSlide++;
   
    if (selectedSlide > slideArr.length - 1) selectedSlide = 0;
    
    moveToSlide(selectedSlide);
});