Optional sidebar menu
Social media
Contact information
Address

5th Avenue, New York - United States

Email

hello@webpixels.ro

Phone

+10 724 1234 567

Boomerang - Style Builder

Layout options


Header options


Color options

Red Violet Blue Green Yellow Orange

Special

Black and white Dark Flat

Components and widgets

Boomerang info! Here are two ways of how you can use our carousels. You can combine any type of block or other element within carousel items.

Default carousel

<div class="carousel carousel-3 slide animate-hover-slide">
    <div class="carousel-nav">
        <a data-slide="prev" class="left" href="#carouselWork"><i class="fa fa-angle-left"></i></a>
        <a data-slide="next" class="right" href="#carouselWork"><i class="fa fa-angle-right"></i></a>
    </div>
    
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-1.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-1.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2 class="text-left">Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button liked">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-2.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-2.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2>Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-3.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-3.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2>Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button liked">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-5.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-5.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2>Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-6.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-6.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2>Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wp-block inverse">
                        <div class="figure">
                            <img alt="" src="images/prv/wk-img-7.jpg" class="img-responsive">
                            <div class="figcaption bg-base"></div>
                            <div class="figcaption-btn">
                                <a href="images/prv/wk-img-7.jpg" class="btn btn-xs btn-b-white theater"><i class="fa fa-plus-circle"></i> Zoom</a>
                                <a href="#" class="btn btn-xs btn-b-white"><i class="fa fa-link"></i> View</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-9">
                                <h2>Bootstrap template</h2>
                                <small>Brand creation</small>
                            </div>
                            <div class="col-xs-3">
                                <div class="like-button">
                                    <span class="button">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <span class="count"><small>123</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Touch carousel with hover effect

Boomerang Alert! You can choose between 1 to 5 items per slide. See the table bellow
Class name Info
.owl-carousel-single Use this if you want to show only one item per slider
.owl-carousel-2 Use this if you want to show two items per slider
.owl-carousel-3 use this if you want to show three items per slider
.owl-carousel-4 use this if you want to show four items per slider
.owl-carousel-5 use this if you want to show five items per slider
<div class="owl-carousel owl-carousel-3 animate-hover-slide-2">
    <div class="item">
        <div class="wp-block inverse">
            <div class="figure">
                <img alt="" src="images/prv/team/team-agency-1.jpg" class="img-responsive">
                <div class="figcaption">
                    <h2>Meredith Grey<small>CEO</small></h2>
                    
                    <ul class="social-icons text-center">
                        <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="wp-block inverse">
            <div class="figure">
                <img alt="" src="images/prv/team/team-agency-2.jpg" class="img-responsive">
                <div class="figcaption">
                    <h2>Meredith Grey<small>CEO</small></h2>
                    
                    <ul class="social-icons text-center">
                        <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="wp-block inverse">
            <div class="figure">
                <img alt="" src="images/prv/team/team-agency-3.jpg" class="img-responsive">
                <div class="figcaption">
                    <h2>Meredith Grey<small>CEO</small></h2>
                    
                    <ul class="social-icons text-center">
                        <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="wp-block inverse">
            <div class="figure">
                <img alt="" src="images/prv/team/team-agency-4.jpg" class="img-responsive">
                <div class="figcaption">
                    <h2>Meredith Grey<small>CEO</small></h2>
                    
                    <ul class="social-icons text-center">
                        <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="wp-block inverse">
            <div class="figure">
                <img alt="" src="images/prv/team/team-agency-3.jpg" class="img-responsive">
                <div class="figcaption">
                    <h2>Meredith Grey<small>CEO</small></h2>
                    
                    <ul class="social-icons text-center">
                        <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>