Creating a carousel

image

Look at official Bootstrap site Carousel section http://twitter.github.io/bootstrap/javascript.html#carousel

Carousel is an integral element of any modern website. Bootstrap provides a standard carousel pretty simple to use and modify. To use  Carousel just copy the code from the official site and include the html file the necessary javascript code. 

You should not have problems and difficulties with the use of the standard bootstrap carousel. Therefore, we will discuss the different methods of use and modification of the carousel to provide additional functionality.

Carousel animation in the Bootstrap based on CSS3 properties. Therefore, any changes to the properties of slides to replace or supplement their styles in your own stylesheet.

NOTE: Be sure to locate your stylesheet files below  bootstrap.css  style file. Than  browsers will apply modyfined properties and overwrite Bootstrap properties by default.

Changing the direction of the slides in the carousel to vertical

Take a look to the Vertical Carousel CSS3 properties

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 400px;
}

.carousel.vertical .prev {
  top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -400px;
}

.carousel.vertical .active.right {
  top: 400px;
}

.carousel.vertical .item {
    left: 0;
}

Code: http://bootply.com/63148

Demo: http://bootply.com/render/63148


Carousel with Fade effect

image

Unfortunately the default bootstrap carousel does not provide fade effect. So here’s the code to quickly create the desired effect.

Demo: http://bootply.com/64693

Code: http://bootply.com/render/64693


Bootstrap carousel with multi items

It is often necessary to show in the carousel several positions at the same time(multi items), it is ideally reduces site space, allows you to show just a lot of positions, such as products or customers logos or anything

image

If you need mobile stacked items here is the solution

image

    @media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
    

Code: http://bootply.com/64680

Demo: http://bootply.com/render/64680


  1. itsbhargav reblogged this from bootstrapresponsive
  2. bootstrapresponsive posted this
Bootstrap premium templates

SAVE 50%! Get 5 Bootstrap premuim templates only for 50% price!

SAVE $14 NOW!

Bootstrap 3.0. v. themes with example templates

Bootstrap 3.0. v. theme Classic Plus

Live demo & Info

Bootstrap v.3.0. theme Dark & Orange flat ui

Live demo & Info

34105

Bootstrap 3.0. RC2 theme white-blue

Live demo & Info

Bootstrap 3.0.! theme GlossyFlat

Live demo & Info

32858

Bootstrap 3.0. theme DRON dark UI

Live demo & Info

Bootstrap 3.0.v. theme Flat Dark UI

Live demo & Info

FLATSCROLLER Bootstrap 3.0. landing page template

Live demo & Info

PARALLAXER Bootstrap 3.0. responsive

Live demo & Info

10 Premium Responsive Bootstrap Templates - only $10!

SAVE 75% NOW!