带有可移动图像的自适应Bootstrap传送带

Question

I'm stuck right now and don't now how to proceed. 我现在陷入困境，现在不知道如何进行。 So I made a Bootstrap Carousel with a fixed height. 所以我做了一个固定高度的Bootstrap Carousel。 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. 此刻，我将图片上移550px。 So I could just put the height on 100% but then the transition gets slower when I resize the window during transition. 因此我可以将高度设置为100％，但是当我在过渡期间调整窗口大小时，过渡会变慢。

So I thought that maybe transform: scale(x,y); 所以我认为也许可以transform: scale(x,y); could help but I don't know how to calculate x and y . 可以帮忙，但我不知道如何计算x和y 。 Now I hope that maybe someone has an awesome idea and could help me out. 现在，我希望有人能提供一个很棒的主意，并能帮助我。

Thanks :] 谢谢：]

https://jsfiddle.net/Lq9Lrsft/ https://jsfiddle.net/Lq9Lrsft/

HTML 的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 的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 的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");
})

Answer 1

Create responsive images by adding an .img-responsive class to the tag. 通过向标签添加.img响应类来创建响应图像。 The image will then scale nicely to the parent element. 然后，图像将很好地缩放到父元素。

Answer 2

JumbleGee , Have a look at the Fiddle here . JumbleGee ，在这里看小提琴 。
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. 要使图像滑入和滑出，请使用css，如代码中所示。

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);
  }

带有可移动图像的自适应Bootstrap传送带

问题描述

2 个解决方案

解决方案1
0 2015-06-12 21:33:37

解决方案2
0 已采纳 2015-06-13 00:53:03

带有可移动图像的自适应Bootstrap传送带

问题描述

2 个解决方案

解决方案1 0 2015-06-12 21:33:37

解决方案2 0 已采纳 2015-06-13 00:53:03

解决方案1
0 2015-06-12 21:33:37

解决方案2
0 已采纳 2015-06-13 00:53:03