Getting started with 3D Carousel

If you're a beginner in JavaScript and CSS, it can be very helpful to study the included examples before you start implementing the 3D Carousel into your page. You can even use them as a starting point for your implementation.

 

1. Include the CSS and JavaScript files in the page

After copying all the necessary files, you need to include them in the header of the HTML page.

<!DOCTYPE html>
     
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Page Title</title>
     
        <link rel="stylesheet" type="text/css" href="css/carousel.css" media="screen"/>

        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> </head> <body> </body> </html>

2. Create HTML markup

You can use both HTML and XML to specify the content of the carousel, but in this article I will cover only HTML use.

As you can see in the code below, you need to create an unordered list (<ul> element). Each <li> element represents an item, and inside the <li> element you need to add an <img> element.

<body>     
    <ul class="carousel">
        <li>
            <img src="http://bqworks.com/products/carousel/carousel-example-images/image1.jpg"/>
            <div class="tooltip">This is just a simple caption.</div>
        </li>
        <li>
            <a href="http://bqworks.com">
                <img src="http://bqworks.com/products/carousel/carousel-example-images/image2.jpg"/>
            </a>
        </li>
        <li>
            <img src="http://bqworks.com/products/carousel/carousel-example-images/image3.jpg"/>
        </li>
        <li>
            <img src="http://bqworks.com/products/carousel/carousel-example-images/image4.jpg"/>
        </li>
        <li>
            <img src="http://bqworks.com/products/carousel/carousel-example-images/image5.jpg"/>
            <div class="tooltip"><u>Title</u><br/><br/>This is a list of items:<ul><li>first item</li><li>second item</li><li>third item</li></ul></div>
        </li>        
    </ul>
</body>

3. Instantiate the carousel

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.carousel').carousel({width: 870, 
                                 height: 350,
                                 itemWidth:120,
                                 horizontalRadius:270,
                                 verticalRadius:85,
                                 resize:false,
                                 mouseScroll:false,
                                 mouseDrag:true,
                                 scaleRatio:0.4,
                                 scrollbar:true,
                                 tooltip:true,
                                 mouseWheel:true,
                                 mouseWheelReverse:true}); }); </script>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk