Bootstrap Show Posts Grid in Carousel with Moving Box

Show the box modal/posts grid in Bootstrap built in Carousel and navigate through next & previous buttons. The plugin helps you to create awesome grid layout/boxes to show products, posts or anything you want in Bootstrap built-in carousel.

Plugin Overview

Plugin: bootstrap-moving-box-carousel
Author: redfrost
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on CodePen
Dependencies: jQuery 2.1.3 or Latest version and Bootstrap 2.3.1 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 5 KB

How to Use Posts Grid in Carousel:

1. Load the Bootstrap CSS and Javascript in your web page.

<!--Bootstrap CSS-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css'>

<!--Bootstrap JS-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js'></script>

2. Create HTML structure for Bootstrap built-in Carousel like below:

<div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="https://source.unsplash.com/360x240/?girl"></a>
                            </div>
                            <div class="caption">
                                <h4>Beautiful Girl</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini btn-primary" href="#">» Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="https://source.unsplash.com/360x240/?bikni"></a>
                            </div>
                            <div class="caption">
                                <h4>Bikni Girl</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini btn-primary" href="#">» Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="https://source.unsplash.com/360x240/?cat"></a>
                            </div>
                            <div class="caption">
                                <h4>Cat</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini btn-primary" href="#">» Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="https://source.unsplash.com/360x240/?beauty"></a>
                            </div>
                            <div class="caption">
                                <h4>World Beauty</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini btn-primary" href="#">» Read More</a>
                            </div>
                        </li>
                    </ul>
              </div><!-- /Slide1 -->  
        </div>
        
        <div class="control-box">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div><!-- /.control-box -->   
                              
    </div><!-- /#myCarousel -->
        
</div><!-- /.span12 -->          
</div><!-- /.row --> 
</div><!-- /.container -->

3. Also load the jQuery (javascript library) in your web page.

<!--jQuery-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

4. Initialize Bootstrap Carousel in jQuery document ready function.

$(document).ready(function() {
    $('.carousel').carousel();
  });

5. Set the time interval for Carousel Auto-Cycle

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 5000 // five seconds 
    })
  });

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...