Responsive Bootstrap Carousel with moveable images
Question
I'm stuck right now and don't now how to proceed. So I made a Bootstrap Carousel with a fixed height. The images inside the slide should go down slowly. The problem I got right now is that this is working good on my bigger screen. But when the window gets smaller the pictures are going out of frame. At the moment I move the picture 550px up. So I could just put the height on 100% but then the transition gets slower when I resize the window during transition.
So I thought that maybe transform: scale(x,y); could help but I don't know how to calculate x and y . Now I hope that maybe someone has an awesome idea and could help me out.
Thanks :]
https://jsfiddle.net/Lq9Lrsft/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Car Mega Bid - Partnerprogramm</title>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div style="background-image: url(http://lorempixel.com/output/food-q-c-1280-853-1.jpg);" class="slider-size slider-img"></div>
</div>
<div class="item">
<div style="background-image: url(http://lorempixel.com/output/animals-q-c-1280-852-3.jpg);" class="slider-size slider-img"></div>
</div>
</div>
<!-- Left and right controls -->
<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>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- jQuery Easing plugin -->
<script src="js/jquery.easing.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
</body>
</html>
CSS
.slider-size {
height: 500px; /* This is the slider height */
}
.slider-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center 0;
}
.slide-img-movedown {
background-position: center 100%;
-webkit-transition: background-position 8s linear;
-moz-transition: background-position 8s linear;
-o-transition: background-position 8s linear;
transition: background-position 8s linear;
}
JavaScript
$(document).ready(function() {
// Timing of sliding
$(".carousel").carousel({
interval: 10000
});
$(this).find('.item.active div').addClass("slide-img-movedown");
});
// Before sliding begins
$('#myCarousel').on('slide.bs.carousel', function(e) {
$prevSlide = $(this).find('.item.active div');
})
// After slide transistion is completed
$('#myCarousel').on('slid.bs.carousel', function(e) {
$prevSlide.removeClass("slide-img-movedown");
$(this).find('.item.active div').addClass("slide-img-movedown");
})
2 answers
solution1
0 2015-06-12 21:33:37
Create responsive images by adding an .img-responsive class to the tag. The image will then scale nicely to the parent element.
solution2
0 ACCPTED 2015-06-13 00:53:03
JumbleGee , Have a look at the Fiddle here .
I have the carousel coming from the top and exit at the bottom.
The images are responsive in the carousel.
To have the images slide in and out it uses css as you will see in the code.
Resize to see how it work for you.
Here is a full size Fiddle if it is easier to resize.
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.