Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Carousel (gallery-carousel) on cdn

Last Updated: 04/20/11

+ 0 -

Gopal Venkatesan

YUI Developer

See 1 more by this user.

Created: 10/4/10
Last CDN Push: 06/6/12
Build Tag: gallery-2012.06.06-19-59
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

The Carousel Control provides a widget for browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region. The "carousel" metaphor derives from an analogy to slide carousels in the days of film photography; the Carousel Control can maintain fidelity to this metaphor by allowing a continuous, circular navigation through all of the content blocks.

Tags:
g13n

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <title>YUI Module</title>
        <!-- Due to a bug the CSS has to be included manually -->
        <link type="text/css" rel="stylesheet"
              href="http://yui.yahooapis.com/gallery-2011.03.23-22-20/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
        <style type="text/css">
        .yui3-carousel-content li { width: 50px; }
        </style>
        <script type="text/javascript"
                src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
                charset="utf-8">
        </script>
    </head>
    <body class="yui3-skin-sam">
        <div id="container" class="yui3-carousel-loading">
            <ol>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
            </ol>
        </div>
    </body>
    <script type="text/javascript">
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.06-19-59'
}).use("gallery-carousel", "substitute", function (Y) {
        Y.on("contentready", function () {
            var carousel = new Y.Carousel({
                boundingBox: "#container",
                contentBox: "#container > ol"
            });
            carousel.render();
        }, "#container");
    });
    </script>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <title>YUI Module</title>
        
        <link type="text/css" rel="stylesheet"
              href="http://yui.yahooapis.com/gallery-2011.03.23-22-20/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
        <style type="text/css">
        .yui3-carousel-content li { width: 50px; }
        </style>
        <script type="text/javascript"
                src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
                charset="utf-8">
        </script>
    </head>
    <body class="yui3-skin-sam">
        <div id="container" class="yui3-carousel-loading">
            <ol>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
            </ol>
        </div>
    </body>
    <script type="text/javascript">
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.06-19-59'
}).use("gallery-carousel", "substitute", function (Y) {
        Y.on("contentready", function () {
            var carousel = new Y.Carousel({
                boundingBox: "#container",
                contentBox: "#container > ol"
            });
            carousel.render();
        }, "#container");
    });
    </script>
</html>

Forum Posts

Subject	Author	Date
Version gallery-2010.10.06-18-55 not working?	Bart Teeuwisse	10/8/10
Re: Version gallery-2010.10.06-18-55 not working?	Huge Huang	10/11/10
Re: Version gallery-2010.10.06-18-55 not working?	Gopal Venkatesan	10/13/10
Re: Version gallery-2010.10.06-18-55 not working?	Gopal Venkatesan	10/13/10
Setting the height of the gallery carousel	paulie	12/2/10
Re: Setting the height of the gallery carousel	paulie	12/2/10
Touch?	Simon Gilligan	12/15/10
Trouble making the example work...	weimer	12/21/10
Can we get an example please ?	matthieu bosquet	01/6/11
Re: Trouble making the example work...	sdeva	01/7/11