Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="bstimeslider">
- <a href="#"> <img src="images/left.png" ></a>
- <div class="tslshow">
- <div class="bktibx"> 12:00 </div>
- <div class="bktibx"> 12:30 </div>
- <div class="bktibx"> 13:00 </div>
- <div class="bktibx"> 13:30 </div>
- <div class="bktibx"> 14:00 </div>
- <div class="bktibx"> 14:30 </div>
- <div class="bktibx"> 15:00 </div>
- <div class="bktibx"> 15:30 </div>
- <div class="bktibx"> 16:00 </div>
- <div class="bktibx"> 16:30 </div>
- <div class="bktibx"> 17:00 </div>
- <div class="bktibx"> 17:30 </div>
- </div>
- <a href="#"><img src="images/right.png"></a>
- <div class="bstimeslider">
- <div id="rightArrow"></div>
- <div id="viewContainer">
- <div id="tslshow">
- <div class="bktibx"> 12:00 </div>
- <div class="bktibx"> 12:30 </div>
- <div class="bktibx"> 13:00 </div>
- <div class="bktibx"> 13:30 </div>
- <div class="bktibx"> 14:00 </div>
- <div class="bktibx"> 14:30 </div>
- <div class="bktibx"> 15:00 </div>
- <div class="bktibx"> 15:30 </div>
- <div class="bktibx"> 16:00 </div>
- <div class="bktibx"> 16:30 </div>
- <div class="bktibx"> 17:00 </div>
- <div class="bktibx"> 17:30 </div>
- </div>
- </div>
- <div id="leftArrow"></div>
- </div>
- .bstimeslider {
- width:500px;
- height:40px;
- background:#ccc;
- position:relative;
- }
- .bktibx {
- float:left;
- margin:0 40px 0 0 ;
- font-size:18px;
- width:60px;
- display:block;
- background:#000;
- color:#fff;
- }
- #tslshow {
- position:absolute;
- left:0;
- width:1200px;
- }
- #leftArrow {
- width:40px;
- height:40px;
- background:#ff0000;
- position:absolute;
- left:0px;
- }
- #rightArrow {
- width:40px;
- height:40px;
- background:#ff0000;
- position:absolute;
- right:0px;
- }
- #viewContainer {
- width:360px;
- height:100%;
- background:#00ff00;
- position:absolute;
- left:50%;
- margin-left:-180px;
- overflow:hidden;
- }
- var view = $("#tslshow");
- var move = "100px";
- var sliderLimit = -750;
- $("#rightArrow").click(function(){
- var currentPosition = parseInt(view.css("left"));
- if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})
- });
- $("#leftArrow").click(function(){
- var currentPosition = parseInt(view.css("left"));
- if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});
- });
- ::-webkit-scrollbar {
- width: 20px;
- }
- ::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px grey;
- border-radius: 10px;
- }
- ::-webkit-scrollbar-thumb {
- background: red;
- border-radius: 10px;
- }
- ::-webkit-scrollbar-thumb:hover {
- background: #b30000;
- }
Add Comment
Please, Sign In to add comment