[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Carousel

The carousel is a slideshow for cycling through a series of content, built with css 3d transforms and a bit of javascript.

###### Bootstrap Carousel

A basic carousel with previous and next control.

Previous Next

Source Code

    <div id="carousel1" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img class="d-block img-fluid" src="../img/img13.jpg" alt="First slide">
        </div>
        <div class="carousel-item">...</div>
        <div class="carousel-item">...</div>
      </div><!-- carousel-inner -->
      <a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- carousel -->

###### Carousel Control Position

A basic carousel with different control positions.

Previous Next
Previous Next
Previous Next
Previous Next

Source Code

    <div id="carousel1" class="carousel slide control-top-left" data-ride="carousel"> ... </div>

Class Reference

Class | Position
--- | ---
`class="carousel slide control-[position]"` | top-left | top-right | bottom-left | bottom-right

###### With Dot Indicator

A basic carousel with dot indicator at the center bottom of slide.

Previous Next

Source Code

    <div id="carousel6" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel6" data-slide-to="0" class="active"></li>
        <li data-target="#carousel6" data-slide-to="1"></li>
        <li data-target="#carousel6" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        ...
      </div><!-- carousel-inner -->
    </div><!-- carousel -->

###### Dot Indicator Position

Six different position to choose from when positioning the indicator of a slide.

Previous Next

Previous Next

Previous Next

Previous Next

Previous Next

Source Code

    <ol class="carousel-indicators indicators-top-center">...</ol>

Class Reference

Class | Position
--- | ---
`class="carousel-indicators indicators-[position]"` | top-center | top-left | top-right | bottom-left | bottom-right

###### Some Important Note

The control and indicators cannot be in the same position as they are overlapping each other, unless if you know how to customize it. If you really want them both have on the same position but don't know how to do it, you can always ask us for customization.

###### Content Carousel

An alternative to image using content instead of sliding an image.

Recent Article

##### 20 Best Travel Tips After 5 Years Of Traveling The World

Recent Article

##### How I Flew Around the World in Business Class for $1,340

Recent Article

##### 10 Reasons Why Travel Makes You a Happier Person

Source Code

    <div id="carousel12" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel12" data-slide-to="0" class="active"></li>
        <li data-target="#carousel12" data-slide-to="1"></li>
        <li data-target="#carousel12" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="bg-primary pd-30 ht-300 d-flex align-items-center">
            <div class="tx-white">
              <p class="tx-uppercase tx-11 tx-spacing-2">Recent Article</p>
              <h5 class="lh-5 mg-b-20">20 Best Travel Tips After 5 Years Of Traveling The World</h5>
              <nav class="nav flex-row tx-13">
                <a href="" class="tx-white-8 hover-white pd-l-0 pd-r-5">Edit</a>
                <a href="" class="tx-white-8 hover-white pd-x-5">Unpublish</a>
                <a href="" class="tx-white-8 hover-white pd-x-5">Delete</a>
              </nav>
            </div>
          </div><!-- d-flex -->
        </div><!-- carousel-item -->
        <div class="carousel-item">...</div>
        <div class="carousel-item">...</div>
      </div><!-- carousel-inner -->
    </div><!-- carousel -->