Sign in


Sign up


Half Carousel

by Dawid Adach,

Final result preview
Live preview
  1. Let's copy following MDB carousel code to our index.php file between header and footer:
  2. 
    
    <!--Carousel Wrapper-->
    <div id="carousel-example-3" class="carousel slide carousel-fade white-text" data-ride="carousel" data-interval="false">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-3" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-3" data-slide-to="1"></li>
            <li data-target="#carousel-example-3" data-slide-to="2"></li>
        </ol>
        <!--/.Indicators-->
    
        <!--Slides-->
        <div class="carousel-inner" role="listbox">
    
            <!-- First slide -->
            <div class="carousel-item active view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(11).jpg'); background-repeat: no-repeat; background-size: cover;">
    
                <!-- Caption -->
                <div class="full-bg-img flex-center white-text">
                    <ul class="animated fadeIn col-md-12">
                        <li>
                            <h1 class="h1-responsive">20 Photos to inspire you to visit Tatra Mountains</h1></li>
                        <li>
                            <p>Best places you should see, traditional dishes that you have to try</p>
                        </li>
                        <li>
                            <a target="_blank" href="http://mdbootstrap.com/getting-started/" class="btn btn-info btn-lg" rel="nofollow">See more!</a>
                        </li>
                    </ul>
                </div>
                <!-- /.Caption -->
    
            </div>
            <!--/.First slide-->
    
            <!-- Second slide -->
            <div class="carousel-item view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Slides/img%20(67).jpg'); background-repeat: no-repeat; background-size: cover;">
    
                <!-- Caption -->
                <div class="full-bg-img flex-center white-text">
                    <ul class="animated fadeIn col-md-12">
                        <li>
                            <h1 class="h1-responsive">10 Reasons you should spend winter holiday in mountains </h1>
                        </li>
                        <li>
                            <p>Best atractions and winter sports!</p>
                        </li>
                        <li>
                            <a target="_blank" href="http://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-info btn-lg" rel="nofollow">Read more</a>
                        </li>
                    </ul>
                </div>
                <!-- /.Caption -->
    
            </div>
            <!--/.Second slide -->
    
            <!-- Third slide -->
            <div class="carousel-item view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Slides/img%20(97).jpg'); background-repeat: no-repeat; background-size: cover;">
    
                <!-- Caption -->
                <div class="full-bg-img flex-center white-text">
                    <ul class="animated fadeIn col-md-12">
                        <li>
                            <h1 class="h1-responsive">Weekend in the nature - the best way to relax</h1></li>
                        <li>
                            <p>8 Reasons why you need to spend more time in nature</p>
                        </li>
                        <li>
                            <a target="_blank" href="http://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg" rel="nofollow">Read more</a>
                        </li>
                    </ul>
                </div>
                <!-- /.Caption -->
    
            </div>
            <!--/.Third slide-->
        </div>
        <!--/.Slides-->
    
        <!--Controls-->
        <a class="carousel-control-prev" href="#carousel-example-3" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-example-3" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!--/.Controls-->
    </div>
    <!--/.Carousel Wrapper-->
                  

    Great!, our carousel is visible and contains 3 sample slides, though the data in it are harcoded.

  3. Replace static slides with dynamic content from posts. Replace static slides code, so everything between:
  4. 
    <!-- First slide -->
    .
    .
    .
    <!--/.Third slide-->
                  
    with following code:
    
    <!--Dynamic query listing posts from "carousel" category-->
    <?php 
    $counter = 1;
    $args = array(
        'orderby'          => 'date',
        'order'            => 'ASC',
        'posts_per_page'   => 3,
        'category_name'  => 'carousel'
        );
    
    // The Query
    $query1 = new WP_Query( $args );
    
    if ( $query1->have_posts() ) {
        // The Loop
        while ( $query1->have_posts() ) {
            $query1->the_post();
            ?>
            <!-- Looping slide -->
            <div class="carousel-item view hm-black-light <?php echo $counter==1 ? "active": ""; ?>" style="background-image: url('<?php echo the_post_thumbnail_url();?>'); background-repeat: no-repeat; background-size: cover;">
                <!-- Caption -->
                <div class="full-bg-img flex-center white-text">
                    <ul class="animated fadeIn col-md-12">
                        <li>
                            <h1 class="h1-responsive"><?php  echo get_the_title(); ?></h1>
                        </li>
                        <li>
                            <p><?php echo get_the_excerpt();?></p>
                        </li>
                        <li>
                            <a href="<?php echo get_permalink() ?>" class="btn btn-lg" rel="nofollow">Read more!</a>
                        </li>
                    </ul>
                </div>
                <!-- /.Caption -->
            </div>
            <!--/.Looping slide-->
            <?php
            $counter++;
        }
        wp_reset_postdata();
    } ?>
    <!--/.Dynamic query listing posts from "carousel" category-->
                          

    Now our slides are dynamic. If you didn't follow previous tutorial, please navigate to previous tutorial to learn more details about dynamic code.

    Note: I have removed btn-default class, as a result buttons are transparent. You can do the same or choose whatever color you want from our button color palette.

    We are done with carousel. It's high time to finish our project by adding 3 cards under carousel.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous Lesson Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 4

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us