<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="awSlider"> <div class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"></li> <li data-target=".carousel" data-slide-to="1"></li> <li data-target=".carousel" data-slide-to="2"></li> <li data-target=".carousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-941.jpg"> <div class="carousel-caption">Görsel #1</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-101.jpg"> <div class="carousel-caption">Görsel #2</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-1051.jpg"> <div class="carousel-caption">Görsel #3</div> </div> <div class="item"> <img src="http://www.adobewordpress.com/wp-content/uploads/2013/07/wallpaper-thumb-74.jpg"> <div class="carousel-caption">Görsel #4</div> </div> </div> <!-- Controls --> <a class="left carousel-control" href=".carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Geri</span> </a> <a class="right carousel-control" href=".carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">İleri</span> </a> </div> </section>

body{ background:#000; } section.awSlider .carousel{ display:table; z-index:2; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 4px #444; box-shadow: 0 0 15px rgba(1,1,1,.5); } section.awSlider{ margin:30px auto; padding:30px; position:relative; display:table; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } section.awSlider:hover > img{ -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); opacity:1; } section.awSlider img{ pointer-events: none; } section.awSlider > img{ position:absolute; top:30px; z-index:1; transition:all .3s; filter: blur(1.8vw); -webkit-filter: blur(2vw); -moz-filter: blur(2vw); -o-filter: blur(2vw); -ms-filter: blur(2vw); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity:.5; }

$('section.awSlider .carousel').carousel({ pause: "hover", interval: 2000 }); var startImage = $('section.awSlider .item.active > img').attr('src'); $('section.awSlider').append('<img src="' + startImage + '">'); $('section.awSlider .carousel').on('slid.bs.carousel', function () { var bscn = $(this).find('.item.active > img').attr('src'); $('section.awSlider > img').attr('src',bscn); }); /* Philips ambilight tv Üzerine gleince duruyor slide */