• Mega
    • Quick Links
      • Dashboard
      • Email Application
      • Chat Application
      • Form Wizard
      • Tables
      • Chartist
      • Gallery Page
    • My Bookmarks
      • Advanced Cards
      • Left sidebar
      • Sticky left sidebar
      • Right sidebar
      • Sticky right sidebar
      • Fixed Navbar & Navigation
      • Fixed Navbar & Footer
    • Recent Products
      First slide
      Second slide
      Third slide
      PreviousNext
      Special title treatment

      Jelly beans sugar plum.

    • Get in touch
  • Apps
    Email Chat Project Summary Calendar
  • English Chinese Russian French Spanish
  • 5
    • Notifications
    • You have new order!

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
      99% Server load

      Aliquam tincidunt mauris eu risus.

      Five hour ago
      Warning notifixation

      Vestibulum auctor dapibus neque.

      Today
      Complete the task
      Last week
      Generate monthly report
      Last month
    • Read all notifications
    • Messages
    • avatar
      Margaret Govan

      I like your portfolio, let's start.

      Today
      avatar
      Bret Lezama

      I have seen your work, there is

      Tuesday
      avatar
      Carie Berra

      Can we have call in this week ?

      Friday
      avatar
      Eric Alsobrook

      We have project party this saturday.

      last month
    • Read all messages
  • avatar
    avatarJohn Doe
    Edit Profile My Inbox Task Chats
    Logout
  • Chameleon admin logo

    Chameleon

  • Dashboard3
    • eCommerce
    • Analytics
  • Apps
    • Email Application
    • Chat Application
    • Full Calendar
    • Project Summary
    • Invoice
    • Timelines
      • Timelines Center
      • Timelines Horizontal
    • Users Profile
    • Contact List
  • Templates
    • Vertical
      • Classic Menu
      • Modern Menu
    • Horizontal
      • Full Width
  • Layouts5
    • Content Sidebar
      • Left sidebar
      • Sticky left sidebar
      • Right sidebar
      • Sticky right sidebar
    • Hide on Scroll Top
    • Fixed navbar
    • Fixed navigation
    • Fixed navbar & navigation
    • Fixed navbar & footer
    • Fixed layout
    • Boxed layout
    • Static layout
    • Navigation light
    • Navigation Dark
    • Flipped Navigation
  • Starter kit
    • Content sidebar
      • Left sidebar
      • Sticky left sidebar
      • Right sidebar
      • Sticky right sidebar
    • Fixed navbar
    • Fixed navigation
    • Fixed navbar & navigation
    • Fixed navbar & footer
    • Fixed layout
    • Boxed layout
    • Static layout
    • Navigation Light
    • Navigation Dark
  • User Interface
    • Content
      • Grid
      • Typography
      • Text utilities
      • Syntax highlighter
      • Helper classes
    • Color Palette
      • Primary palette
      • Danger palette
      • Success palette
      • Warning palette
      • Info palette
      • Red palette
      • Pink palette
      • Purple palette
      • Blue palette
      • Cyan palette
      • Teal palette
      • Yellow palette
      • Amber palette
      • Blue Grey palette
    • Bootstrap Cards
    • Advanced Cards
    • Icons
      • Feather
      • Line Awesome
      • Simple Line Icons
    • Animation
  • Components
    • Bootstrap
      • Alerts
      • Buttons
      • Carousel
      • Collapse
      • Dropdowns
      • List Group
      • Modals
      • Pagination
      • Navs
      • Tabs
      • Pills
      • Tooltips
      • Popovers
      • Badges
      • Pill Badges
      • Progress
      • Media Objects
    • Extra
      • Sweet Alerts
      • Toastr
      • Ratings
      • Tour
      • Editors
        • CKEditor
        • TinyMCE
      • Date & Time Picker
      • Block UI
      • File Uploader
  • Forms
    • Form Elements
      • Form Inputs
      • Switch
      • Select2
      • Checkboxes & Radios
      • Tags Input
      • Validation
      • Extended Inputs
    • Form Layouts
      • Basic Forms
      • Horizontal Forms
      • Hidden Labels
    • Form Wizard
    • Form Repeater
  • Tables
    • Bootstrap Tables
    • DataTables
      • Basic Initialisation
      • Styling
      • Data Sources
      • Advanced initialisation
      • API
  • Charts
    • Chartist
    • Chartjs
    • Maps
      • Google Maps
      • jVector Map
  • Pages
    • Gallery
    • Search
    • Authentication
      • Login
      • Register
      • Unlock User
      • Recover password
    • Error
      • Error 400
      • Error 401
      • Error 403
      • Error 404
      • Error 500
    • Coming Soon
    • Maintenance
  • Changelog1.0
  • Menu levels
    • Second level
    • Second level child
      • Third level
  • Raise Support
  • Documentation

Carousel

  1. Home
  2. Components
  3. Carousel
Email

Basic Example

First slide
Second slide
Third slide
Previous Next
											
													<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
															<ol class="carousel-indicators">
																<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
																<li data-target="#carousel-example-generic" data-slide-to="1"></li>
																<li data-target="#carousel-example-generic" data-slide-to="2"></li>
															</ol>
															<div class="carousel-inner" role="listbox">
																<div class="carousel-item active">
																	<img src="..." alt="First slide">
																</div>
																<div class="carousel-item">
																	<img src="..." alt="Second slide">
																</div>
																<div class="carousel-item">
																	<img src="..." alt="Third slide">
																</div>
															</div>
															<a class="carousel-control-prev" href="#carousel-example-generic" 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-generic" role="button" data-slide="next">
																<span class="carousel-control-next-icon" aria-hidden="true"></span>
																<span class="sr-only">Next</span>
															</a>
														</div>
											
											

Interval Option

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

First slide
Second slide
Third slide
Previous Next

Pause Option

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.

First slide
Second slide
Third slide
Previous Next

Carousel Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item.

First slide

First Slide Label

Donut jujubes I love topping I love sweet.

Second slide

Second Slide Label

Tart macaroon marzipan

Third slide

Third Slide Label

Pudding sweet pie gummies

Previous Next

Wrap Option

Whether the carousel should cycle continuously or have hard stops. Default: true

First slide
Second slide
Third slide
Previous Next

Keyboard Option

Whether the carousel should react to keyboard events. Default: true

First slide
Second slide
Third slide
Previous Next
2018 © Copyright ThemeSelection
  • More themes
  • Support
  • Purchase