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://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://www.alexbond.ru/sites/all/template/lib/bondSlider/1.8/jquery.bondSlider-1.8.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#bondSlideBox").bondSlider({
        autoPlayTime: 5000,
        naviOverActive: false,
        typeScroller: "vertical"
      });
    });
  </script>
<meta charset=utf-8 />
<title>bondSlider - Вериткальный слайдер</title>
</head>
<body>
<h1>Вериткальный слайдер</h1>
​
<div id="bondSlideBox" class="bondSlideBox">
    <div class="content">
        <div class="bondWrapFrames">
            <div class="bondFrames">
                <img class="bondFrame" src="http://www.alexbond.ru/sites/all/template/images/26.02.13/img1.jpg" alt="" />
                <img class="bondFrame" src="http://www.alexbond.ru/sites/all/template/images/26.02.13/img2.jpg" alt="" />
                <img class="bondFrame" src="http://www.alexbond.ru/sites/all/template/images/26.02.13/img3.jpg" alt="" />
                <img class="bondFrame" src="http://www.alexbond.ru/sites/all/template/images/26.02.13/img4.jpg" alt="" />
            </div>
        </div>
    </div>
    <div class="bondNavi">
        <div class="bondThumb">
            <img src="http://www.alexbond.ru/sites/all/template/images/26.02.13/preview1.jpg" alt="Карлов мост" />
            <div><span class="title">Карлов мост</span> 
                <br/> <span class="sign">в Праге через реку Влтава</span>
​
            </div>
        </div>
        <div class="bondThumb">
            <img src="http://www.alexbond.ru/sites/all/template/images/26.02.13/preview2.jpg" alt="Рейнский водопад" />
            <div><span class="title">Рейнский водопад</span> 
                <br/> <span class="sign">на севере Швейцарии</span>
​
            </div>
        </div>
        <div class="bondThumb">
            <img src="http://www.alexbond.ru/sites/all/template/images/26.02.13/preview3.jpg" alt="Закат в Тиволи" />
            <div><span class="title">Закат в Тиволи,</span> 
                <br/> <span class="sign">в 24 км от Рима</span>
​
            </div>
        </div>
        <div class="bondThumb">
            <img src="http://www.alexbond.ru/sites/all/template/images/26.02.13/preview4.jpg" alt="Дорога ста фонтанов" />
            <div><span class="title">Дорога ста фонтанов</span> 
                <br/> <span class="sign">в вилле д’Эсте в Тиволи</span>
​
            </div>
        </div>
    </div>
</div>  
</body>
</html>
​
 
​
Output

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

Dismiss x
public
Bin info
alexbondpro
0viewers