New Home page banner Slider/Fader

Desktop Scroller

#### documentation                                          ####
#### https://v4-alpha.getbootstrap.com/components/carousel/ ####

<style>
.ekm-edit-button {z-index: 9999;}
#myCarousel > div > div.item.active > div > a {margin: 0 auto!important;}

.carousel{position:relative;}
.carousel-inner{position:relative;overflow:hidden;width:100%;}
.carousel-inner>.item{display:none;position:relative;}
.carousel-inner>.item>img,.carousel-inner>.item>a>img{line-height:1;}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block;}
.carousel-inner>.active{left:0;}
.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%;}
.carousel-inner>.next{left:100%;}
.carousel-inner>.prev{left:-100%;}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0;}
.carousel-inner>.active.left{left:-100%;}
.carousel-inner>.active.right{left:100%;}
.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5) 0),color-stop(rgba(0,0,0,.0001) 100%));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);}
.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001) 0),color-stop(rgba(0,0,0,.5) 100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);}
.carousel-control:hover,.carousel-control:focus{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}
.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{position:absolute;top:50%;z-index:5;display:inline-block;}
.carousel-control .icon-prev,.carousel-control .glyphicon-chevron-left{left:50%;}
.carousel-control .icon-next,.carousel-control .glyphicon-chevron-right{right:50%;}
.carousel-control .icon-prev,.carousel-control .icon-next{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039';}
.carousel-control .icon-next:before{content:'\203a';}
.carousel-indicators{
    position: absolute;
    bottom: 10px;
    z-index: 15;
    left: 50%;
    padding-left: 0;
    list-style: none;
    text-align: center;
    transform: translateX(-50%);
};
.carousel-indicators li{
	display:inline-block;
	width:10px;
	height:10px;
	margin:1px;
	text-indent:-999px;
	border:1px solid #fff;
	border-radius:10px;
	cursor:pointer;
	background-color:#000 \9;
	background-color:rgba(0,0,0,0);
}
.carousel-indicators .active{width:12px;height:12px;background-color:#fff;float: left;}

.carousel-indicators li {width: 12px;height: 12px;margin: 2px;background-color: #585858;float: left; cursor: pointer;}

.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.carousel-caption .btn{text-shadow:none;}
.carousel-inner img{
height:auto!important;
width:100%!important;
}

@media screen and (min-width:768px;)
{.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px;}
.carousel-caption{left:20%;right:20%;padding-bottom:30px;}
.carousel-indicators{bottom:20px;}
}


</style>




<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  
  <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner">

	[ekm:element]
		element_reference='slide-1';
		show='yes';
		allowed_types='image';
		output_start='<div class="item active"> ';
		output_end='</div>';
		output_default='<img src="URLHERE" style="width:100%" alt="First slide">';
	[/ekm:element]
    
 	[ekm:element]
		element_reference='slide-2';
		show='yes';
		allowed_types='image';
		output_start='<div class="item"> ';
		output_end='</div>';
		output_default='<img src="URLHERE" style="width:100%" data-src="" alt="Second slide">';
	[/ekm:element]
	
 	[ekm:element]
		element_reference='slide-3';
		show='yes';
		allowed_types='image';
		output_start='<div class="item"> ';
		output_end='</div>';
		output_default='<img src="URLHERE" style="width:100%" data-src="" alt="Third slide">';
	[/ekm:element]
	
 	[ekm:element]
		element_reference='slide-4';
		show='yes';
		allowed_types='image';
		output_start='<div class="item"> ';
		output_end='</div>';
		output_default='<img src="URLHERE" style="width:100%" data-src="" alt="Forth slide">';
	[/ekm:element]

   </div>  

     <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
     <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

</div>
  
<!-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>