6
  • Notifications

    New 6
    • just now Congratulations!.
    • 3 mins John Micle is now following you.
    • 7 mins Sneha Jogi sent you a message.
    • 12 mins Ravi Patel like your photo.
    • 15 mins Warning!
    • 10 hrs Application error.
  • James Vince

    info@sbtechnosoft.com
  • Profile
  • Settings
  • Help
  • Lock
  • Log Out

Less Williams

Online
  • Dashboard
  • UI Elements New
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Carousel
    • Collapse
    • Dropdowns
    • Embeds
    • Grids
    • Images
    • Media
    • Modals
    • Paginations
    • Popovers
    • Progress Bars
    • Spinners
    • Tabs
    • Toasts
    • Tooltips
    • Typography
  • Icons
    • Themify
    • Font Awesome
    • Dripicons
    • Feather
    • Ion
    • Line Awesome
    • Material Design
    • Remixicon
    • Simple Line
    • Socicon
    • Typicons
  • Widgets
    • Widgets Base
    • Widgets Chart
  • Email New
    • Inbox
    • Email Read
    • Email Compose
  • Calendar
    • Basic Calendar
    • External Events Calendar
    • List Calendar
  • Forms
    • Form Elements
    • Form Validation
    • Form Pickers
    • Form Wizard
    • Form Masks
    • X Editable
    • Multiple File Upload
  • Apps
    • Calendar
    • Contacts
    • Todo List
  • Tables
    • Basic Tables
    • Data Tables
    • Responsive Table
    • Tablesaw Tables
    • Foo Tables
  • Charts
    • Flot Chart
    • Morris Chart
    • Google Chart
    • Chartist Chart
    • Chartjs Chart
    • Sparkline Chart
    • Jquery Knob
  • Extra Pages
    • User Profile
    • Sign In
    • Sign Up
    • Invoice
    • 404

Carousel

  1. Home
  2. UI Elements
  3. Carousel
Slides Only
Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.
With Controls
Adding in the previous and next controls:
Previous Next
With Indicators
You can also add the indicators to the carousel, alongside the controls, too.
Previous Next
With Captions
Add captions to your slides easily with the .carousel-caption element within any .carousel-item.
label

Nulla vitae elit libero, a pharetra augue mollis interdum.

label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next
Crossfade
Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.
Previous Next
Individual .carousel-item interval
Add data-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.
Previous Next

© Multinod - All Rights Reserved.