Živá ukázka

Výsledek

<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        
        <div class="item active">

<div class="container">
            <div class="carousel-caption">
              <h1>slide 1</h1>
              <p></p>

</div>
  
          </div>
      </div>

<div class="container">
            <div class="carousel-caption">
              <h1>slide 2</h1>
              <p></p>

</div>
          </div>
        </div>
        <div class="item">

<div class="container">
            <div class="carousel-caption">
              <h1>slide 3</h1>
              <p></p>
            </div>
          </div>
        </div>
      </div>

</div>
         <div class="container kt_sideborder kt_paddingfix carousel" id="kt_carcontr">
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

@media (max-width: 991px) {
  a.carousel-control{
    visibility: hidden;
  }

#kt_carcontr{
  	visibility: hidden;
  	display: none;
  }

}

@media (min-width: 869px) {
  .container {
    width: 750px;
  }

}
@media (min-width: 1092px) {
  .container {
    width: 970px;
  }
  #kt_tiles{
  	height: 970px;
  }
	.kt_tile_text p {
		font-size: 10px ;
	}
}

@media (min-width: 1300px) {
  .container {
    width: 1170px;
  }

}

.carousel {
  min-height: 500px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: auto;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-indicators li {
    width: 40px;
    height: 40px;
    margin: 0px;
    background-color: #337AB7;
    border-radius: 20px;
    margin-left: 20px;

}

.carousel-indicators .active {
	width: 40px;
    height: 40px;
    margin: 0px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 20px;
    margin-left: 20px;
}

#kt_carcontr
{
	background: rgba(0,0,0,0.5);
	margin: auto;
	top: 0; left: 0; right: 0;
	z-index: 1;
	position: absolute;
}

.carousel-control
{
	
	width: 50px;
	filter: alpha(opacity=70);
	opacity: 70;

}

.carousel-control:focus
{
	filter: alpha(opacity=70);
	opacity: 70;
}

.carousel-control.left
{
	width: 50px;
	left:-50px;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.7)));
	background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}

.carousel-control:hover{
	color: #00bff3;
}

.carousel-control.right
{
	width: 50px;
	right: -50px;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.7) 0,rgba(0,0,0,.0001) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.7) 0,rgba(0,0,0,.0001) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.7)),to(rgba(0,0,0,.0001)));
	background-image:linear-gradient(to right,rgba(0,0,0,.7) 0,rgba(0,0,0,.0001) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}

@media (max-width: 991px) {

.carousel .item {
        min-height: auto;
        padding-bottom: 120px;
      }

.carousel {
        min-height: auto;
      }

}

@media (min-width: 992px) { /*drive 848*/

.carousel-indicators{
          visibility:hidden;
        }

.carousel .item {
        min-height: 500px;
      }

.carousel {
        min-height: 500px;
      }

}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS