### Boomerang - Style Builder

#### Layout options

I prefer it:
Predefined body backgrounds
Section title:
Color:

#### Header options

Header:
Top header color:
Nav shadow
Dropdown arrow:

#### Color options

Predefined colors Red Violet Blue Green Yellow Orange

#### Special New

Predefined schemes Black and white Dark Flat
Reset all applied styles

## Components and widgets

- Accordion
- Alerts
- Badges
- Blocks
  - Default Blocks
  - Inverse Blocks
  - Hero Blocks
  - Large Blocks + Arrow
  - Small Blocks + Arrow
  - Icon Blocks
  - Product Blocks
  - Property Blocks
- Buttons
  - Boomerang Buttons
  - Bootstrap Buttons
- Callouts
- Carousels
- Pagination
- Progress Bars
- Range Sliders
- Rating Stars
- Ribbons
- Tabs
- Typography
  - General
  - Lists
  - Testimonials

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

Zoom View

## Bootstrap template

Brand creation
123
Zoom View

## Bootstrap template

Brand creation
123
Zoom View

## Bootstrap template

Brand creation
123
Zoom View

## Bootstrap template

Brand creation
123
Zoom View

## Bootstrap template

Brand creation
123
Zoom View

## Bootstrap template

Brand creation
123

    <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

## Meredith GreyCEO

    <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>