film silider kodu
film teması için silider
Film temalarında kullanabileceğiniz film şeridi kodu. manuel geçişlidir ve yalnızca html ile ekliyebileceğiniz oldukça şık bir slider dir. içerisinde css kodu ile kullanılmıştır, html bilen arkadaşlar bu kodları ayrıştırarak css kodunu ayrı kullanabilirler, tüm platformlarda çalışabilmesi için bu şekilde paylaştım. Kodların tamamını html kod kısmı için kullanılmasında bir sakınca yoktur.
nasıl kullanılır ?
nasıl kullanılır ?
ÖNİZLEME
 |
| ekran görüntüsü |
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
body{padding-top:20px;}
/* css başlangıç */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
/* The indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}/* css bitiş */
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'http://bootsnipp.com');
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
</div>
</div>
</div><!--.container-->
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
</script>
</body>
</html>
CSS
Join the conversation