<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="row threed-section">
<div class="col-md-12">
<span href="#" class="span-featured2">Top Stories</span>
<div class="carousel carousel-multiItem slide" id="carousel-item">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-4 hover">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2013/03/photodune-2064182-moscow-m-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Benfica crowned 2014/15 Champions of Portugal</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2010/02/bank-station-entrance-in-london-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Putin election victory: What next for Russia?</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2013/04/tumblr_mzx9rx6HMZ1slhhf0o1_1280-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Putin election victory: What next for Russia?</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover">
<a href="#" ><img src=" http://demo.wpzoom.com/domino/files/2010/02/bank-station-entrance-in-london-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Putin election victory: What next for Russia?</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover ">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2015/02/tumblr_nokjp3Im5K1tomxvuo3_1280-1024x660.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Benfica crowned 2014/15 Champions of Portugal</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover ">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2010/02/bank-station-entrance-in-london-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Benfica crowned 2014/15 Champions of Portugal</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover ">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2010/02/bank-station-entrance-in-london-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Benfica crowned 2014/15 Champions of Portugal</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-4 hover ">
<a href="#" ><img src="http://demo.wpzoom.com/domino/files/2013/03/photodune-2064182-moscow-m-1000x500.jpg" class="img-responsive"></a>
<div class="data-enter" id="data-enter">
<h3><a>Benfica crowned 2014/15 Champions of Portugal</a></h3>
<span class="date">May 29,2015</span>
<span class="comment">0 Comment</span>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-item" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel-item" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
/*
...customise bootstrap carousel
...change bootstrap carousel interval
*/
$('#carousel-item').carousel({
interval: 4000
});
}());
(function() {
$('.carousel-multiItem .item').each(function() {
var itemToClone = $(this);
/*
.....number of item show in slide !
*/
for (var i = 1; i < 3; i++) {
/*
..... go to the next item in curasol
*/
itemToClone = itemToClone.next();
/* ....
when that item is last item in cauarsol-item do this choos first sibling item and
go to do add it , clone, add class, and add to collection
*/
/* else.....
skip this condition and go to add item content and clone it ....
*/
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
/*
.... show the first-child in item class " this div contain the content inside in"
... then clone this selector "clearly meaning copy the data"
... and give it tha css style
... then add it to collection in slide
*/
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
$(".carousel-multiItem ").find(".item").css("transition", " 500ms ease-in-out all ").css("transition", " 500ms ease-in-out all").css("backface-visibility", "visible").css("transform", "none!important")
/*
.... you can use bootstrap function if you used bootstrap CDN
.... but iam used always bootstrap.min.js so i do this
.... @media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d)
*/
}
});
}());
</script>
/*bootstarb edite */
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right {
border: 2px solid #fff;
padding-left: 8px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 40px
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right:hover {
color: black;
background: white;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
border: 2px solid #fff;
padding-left: 8px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 40px
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left:hover {
color: black;
background: white;
}
@media (max-width:768px) {
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
padding-bottom: 10px;
padding-right: 8px;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right {
padding-bottom: 10px;
padding-right: 8px;
}
}
/*end bootstrap */
.threed-section {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
}
.span-featured2 {
background-color: #EF6767;
color: white;
bottom: 0px;
padding-bottom: 15px;
font-size: 23px;
padding-top: 5px;
text-transform: uppercase;
padding-left: 5px;
padding-right: 5px;
font-family: "Roboto Condensed";
}
.col-md-4,
.col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
/* start carousel style */
.threed-section img {
height: 250px;
width: 500px;
}
.carousel-multiItem .carousel-control {
width: 4%;
background-image: none;
}
.carousel-multiItem .carousel-control.left {
margin-left: 15px;
}
.carousel-multiItem .carousel-control.right {
margin-right: 15px;
}
.carousel-multiItem .cloneditem-1,
.carousel-multiItem .cloneditem-2,
.carousel-multiItem .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-multiItem .carousel-inner > .active.left,
.carousel-multiItem .carousel-inner > .prev {
left: -33.333%;
}
.carousel-multiItem .carousel-inner > .active.right,
.carousel-multiItem .carousel-inner > .next {
left: 33.333%;
}
.carousel-multiItem .carousel-inner > .left,
.carousel-multiItem .carousel-inner > .prev.right,
.carousel-multiItem .carousel-inner > .active {
left: 0;
}
.carousel-multiItem .carousel-inner .cloneditem-1,
.carousel-multiItem .carousel-inner .cloneditem-2 {
display: block;
}
}
@media all and (min-width: 992px) {
.carousel-multiItem .carousel-inner > .active.left,
.carousel-multiItem .carousel-inner > .prev {
left: -16.666%;
}
.carousel-multiItem .carousel-inner > .active.right,
.carousel-multiItem .carousel-inner > .next {
left: 16.666%;
}
.carousel-multiItem .carousel-inner > .left,
.carousel-multiItem .carousel-inner > .prev.right,
.carousel-multiItem .carousel-inner > .active {
left: 0;
}
..carousel-multiItem .carousel-inner .cloneditem-1,
.carousel-multiItem .carousel-inner .cloneditem-2,
.carousel-multiItem .carousel-inner .cloneditem-3 {
display: block;
}
}
/*start content img style */
.item h3 > a {
text-decoration: none;
color: #fff;
font-family: "Roboto";
font-size: 20px;
font-weight: 700;
max-width: 279.233px;
text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px;
transition-delay transition: all .8s ease;
}
.item h3 > a:hover {
border-bottom: 2px solid #fff;
}
.data-enter span {
margin-left: 15px;
margin-right: 15px;
visibility: hidden;
opacity: 0;
position: absolute;
min-height: 50px;
padding: 30px 0 10px;
width: 100%;
bottom: 0;
left: 0;
color: #fff;
margin: 0;
z-index: 23;
transition: all .5s ease;
font-family: "Roboto";
}
.data-enter h3 {
position: absolute;
bottom: 7%;
left: 0;
z-index: 21;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
max-width: 90%;
margin-left: 15px;
color: #fff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
font-family: "Roboto";
cursor: pointer;
transition: all .5s ease;
}
.hover:hover span {
visibility: visible;
opacity: 1;
cursor: pointer;
transform: translate(0px, -5px);
}
.hover:hover h3 {
transform: translate(0px, -40px);
}
.data-enter .comment {
float: right;
color: #fff;
box-sizing: border-box;
color: rgb(255, 255, 255);
font-family: "Roboto";
font-size: 14px;
line-height: 23.8px;
margin-bottom: 0px;
margin-left: 120px;
margin-right: 15px;
margin-top: 0px;
cursor: pointer;
}
.data-enter .date {
float: left;
box-sizing: border-box;
color: rgb(255, 255, 255);
font-family: "Roboto";
font-size: 14px;
line-height: 23.8px;
margin-bottom: 0px;
margin-left: 15px;
margin-right: 15px;
margin-top: 0px;
cursor: pointer;
}
