Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<div id="gal_container">
  
  <div id="labeler"></div>
  <ul id="labels">
    <li>Discover </li>
    <li>Collaborate </li>
    <li>Create </li>
    <li>Develop </li>
    <li>Launch </li>
    <li>Maintain </li>
    <li>Learn </li>
  </ul>
  
  
  <div id="pages">
    <div>
      <h2>content 1</h2>
    </div>
    <div>
      <h2>content 2</h2>
    </div>
    <div>
      <h2>content 3</h2>
    </div>
    <div>
      <h2>content 4</h2>
    </div>
    <div>
      <h2>content 5</h2>
    </div>
    <div>
      <h2>content 6</h2>
    </div>
    <div>
      <h2>content 7</h2>
    </div>
  </div>
  
  <div id="prev"></div>
  <div id="next"></div>
  
  
</div>
  
  
</body>
</html>
​
 
body{background:#4A1816;color:#fff;font-family:Arial;}
​
#gal_container{
  position:relative;
  margin:0 auto;
  width:354px;
}
​
/* ---------- */
/* ---------- */
​
#labeler{
  position:absolute;
  left:0px;
  top:-40px;
}
#labels{
  position:relative;
  height:4px;
  padding:0;
  list-style:none;
  background:#f10;
  margin-top:50px; /* space for labeler */
}
#labels li{
  margin:-7px 38px 0 0;
  width:12px;
  height:12px;
  padding-left:-7px;
  border:3px solid #f10;
  background:#411;
  border-radius:10px;
  float:left;
  text-indent:-9000px;
}
#labels li:last-child{
  margin-right:0px; 
}
#labels li.select{
   background:#fff;
   -webkit-box-shadow:inset 0 0 0 3px #411;
           box-shadow:inset 0 0 0 3px #411;
}
/* ---------- */
#pages{
  background:#000;
  overflow:hidden;
  position:relative;
  width:354px;
  height:354px;
  border-radius:8px;
  -webkit-border-radius:8px;
}
#pages > div{
  position:absolute;
  top:0px;
  height:100%;
  width:300px;
  background:#ad1000;
  padding:27px;
}
/* ---------- */
#prev, #next{
  cursor:pointer;
  position:absolute;
  background:#fff;
  width:50px;
  height:50px;
  top:168px;
          border-radius:40px;
  -webkit-border-radius:40px;
  opacity:0.5;
}
#prev:hover, #next:hover{
   opacity:0.8;
}
#prev{
  left:-25px;
}
#next{
  right:-25px;
}
 
$(function(){
​
  var $lab_UL  = $('#labels'),
      $lab_LI  = $lab_UL.find('li'),
      $labeler = $('#labeler'),
      $page    = $('#pages').find('div'),
      pagesN   = $page.length;
      c        = 0;      //  curr. counter
  
  
  $page.hide().eq( c ).show();
  $lab_LI.eq( c ).addClass('select');
  
  // functions
  function labelize(){
     var liPos = $lab_LI.eq( c ).position().left;
     $labeler.text( $lab_LI.eq( c ).text() )
      .css({ left: - ($labeler.width()/2) + liPos });
  }
  
  function selectBtn(){
     $lab_LI.removeClass('select').eq( c ).addClass('select');
  }
  
  function changePages(){
     $page.hide().eq( c ).fadeTo(300,1); 
  }
  
  // run some on DOM ready
  labelize();
  selectBtn();
  
  
  $('#prev, #next').click(function(){
    
    // logic //
    var myID = this.id=='next' ? c++ : c--;  
    c= c===-1? pagesN-1 : c%pagesN ;  
   
    // execute our functions
     labelize();
     selectBtn();
     changePages();
  });
​
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers