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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta content="rcarousel, carousel, jquery ui carousel" name="keywords">
        <meta content="rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even older browsers." name="description">           
        <title>rcarousel – continuous jQuery UI carousel</title>
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css' />
        <link type="text/css" rel="stylesheet" href="http://ryrych.github.com/rcarousel/css/reset.css" />
        <link type="text/css" rel="stylesheet" href="http://ryrych.github.com/rcarousel/css/style.css" />
        <link type="text/css" rel="stylesheet" href="http://ryrych.github.com/rcarousel/widget/css/rcarousel.css" />        
    </head>
    <body>
        <div id="carousel-container">
            <div id="carousel">
                <div id="slide01" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/jqueryui.png" alt="jQuery UI logo" />
                    <div class="text">
                        <h1>continuous<br />carousel</h1>
                        <p>driven by jQuery UI</p>
                    </div>
                </div>
                
                <div id="slide02" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/anycontent.png" alt="any content" />
                    <div class="text">
                        <h1>any content</h1>
                        <p>from images to any HTML element</p>
                    </div>
                </div>
                
                <div id="slide03" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/horizontalvertical.png" alt="horizontal and vertical carousel" />
                    <div class="text">
                        <h1>horizontal<br />and vertical</h1>
                        <p>carousels just one click away</p>
                    </div>
                </div>
                
                <div id="slide04" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/multi.png" alt="multi carousels" />
                    <div class="text">
                        <h1>multi<br />carousels</h1>
                        <p>on a page</p>
                    </div>
                </div>
                
                <div id="slide05" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/customization.png" alt="customization" />
                    <div class="text">
                        <h1>highly<br />customizable</h1>
                        <p>style it whatever you like</p>
                    </div>
                </div>
                
                <div id="slide06" class="slide">
                    <img src="http://ryrych.github.com/rcarousel/examples/images/html_slides/browsers.png" alt="multi browser support" />
                    <div class="text">
                        <h1>multi browser<br />support</h1>
                        <p>supports even old browsers</p>
                    </div>
                </div>                  
            </div>
            <a href="#" id="ui-carousel-next"><span>next</span></a>
            <a href="#" id="ui-carousel-prev"><span>prev</span></a>
            <div id="pages"></div>
        </div>
        
        <h1 class="change">rcarousel</h1>       
​
        
​
    
        
        <script type="text/javascript" src="http://ryrych.github.com/rcarousel/widget/lib/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="http://ryrych.github.com/rcarousel/widget/lib/jquery.ui.core.js"></script>
        <script type="text/javascript" src="http://ryrych.github.com/rcarousel/widget/lib/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="http://ryrych.github.com/rcarousel/widget/lib/jquery.ui.rcarousel.js"></script>
        <script type="text/javascript" src="http://ryrych.github.com/rcarousel/js/carousel.js"></script>    
    </body>
</html>
​
​
Output

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

Dismiss x
public
Bin info
elkebirmedpro
0viewers