Using 3D Carousel in WordPress

1. Create a new folder in the theme's folder, call it "carousel" and copy all the carousel's files from "plugin_files" inside.

2. Open the theme's functions.php file and add the following code:

<?php
add_action('wp_enqueue_scripts', 'load_carousel_scripts');
add_action('wp_footer', 'instantiate_carousel');


function load_carousel_scripts() {
    wp_enqueue_style('carousel-css', get_bloginfo('template_directory') . '/carousel/carousel.css');
	
    wp_enqueue_script('jquery');
    wp_enqueue_script('carousel-js', get_bloginfo('template_directory') . '/carousel/jquery.carousel.min.js');
}


function instantiate_carousel() {
?>
    <script>
        jQuery(document).ready(function(){
            jQuery('.carousel').carousel({width:700, height:700}); 
        }); 
    </script>
<?php
}
?>

3. Create a new post/page and add the required HTML code for the carousel:

<ul class="carousel">
    <li>
        <img src="http://bqworks.com/products/carousel/images/1.jpg"/>
    </li>
	
    <li>
        <img src="http://bqworks.com/products/carousel/images/2.jpg"/>
    </li>
	
    <li>
        <img src="http://bqworks.com/products/carousel/images/3.jpg"/>
    </li>
	
    <li>
        <img src="http://bqworks.com/products/carousel/images/4.jpg"/>
    </li>
	
    <li>
        <img src="http://bqworks.com/products/carousel/images/5.jpg"/>
    </li>
</ul>

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk