Michael Janea

MJ CAROUSEL (665 downloads)

A slideshow component for cycling through elements, like a carousel.

 

Demo

 

More Set-up Information

Option Description
delay

milliseconds between the end of the sliding effect and the start of the next one

Default Value: 3000
transition

lenght of the sliding effect in milliseconds

Default Value: 400

 

Directions

  1. Extract the downloaded zip file (mjCarousel.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjCarousel.css" />
  3. Insert below codes before the </body> tag of your page
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="mjCarousel.js"></script>
    <script type="text/javascript">
    $('#myCarousel').mjCarousel();
    </script>
  4. Add the below sample HTML to the BODY of your page
    <div class="mj_carousel" id="myCarousel">		
        <div class="mj_carousel_images">
            <div class="mj_carousel_image active">
                <img src="slide1.jpg" />
                <div class="mj_carousel_caption">
                    <div class="mj_carousel_title">Title 1</div>
                    <div class="mj_carousel_description">Debitis, assumenda, iste, facere, ipsam velit ea ullam nam nesciunt quod fugiat quis cupiditate nostrum totam doloremque et veniam deserunt maxime quas.</div>
                </div>
            </div>
            
            <div class="mj_carousel_image">
                <img src="slide2.jpg" />
                <div class="mj_carousel_caption">
                    <div class="mj_carousel_title">Title 2</div>
                    <div class="mj_carousel_description">Nam, animi, quidem, consequatur cumque placeat eius harum velit natus repellat quo tempore eaque voluptates ipsam nesciunt obcaecati?</div>
                </div>
            </div>
            
            <div class="mj_carousel_image">
                <img src="slide3.jpg" />
                <div class="mj_carousel_caption">
                    <div class="mj_carousel_title">Title 3</div>
                    <div class="mj_carousel_description">Architecto, repellat, sapiente, labore, pariatur esse natus quod doloribus deserunt tempore ducimus hic alias placeat quas rerum ipsam obcaecati expedita.</div>
                </div>
            </div>
        </div>
        
        <div class="mj_carousel_controls">
            <div class="mj_carousel_prev"></div>
            <div class="mj_carousel_next"></div>
        </div>
    </div>

 

Logs

 

Download MJ Carousel

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.