响应式 Bootstrap 带有可移动图像的轮播

Question

我现在卡住了，现在不知道如何进行。所以我做了一个 Bootstrap 固定高度的旋转木马。幻灯片中的图像应该慢慢下降。我现在遇到的问题是这在我的大屏幕上运行良好。但是当 window 变小时，图片就会失帧。目前我将图片向上移动了 550px。所以我可以将高度设置为 100%，但是当我在过渡期间调整 window 的大小时，过渡会变慢。

所以我认为 transform: scale(x,y); 可能会有所帮助，但我不知道如何计算 x 和 y。现在我希望也许有人有一个很棒的想法可以帮助我。

谢谢:]

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

Answer 1

通过向标签添加 .img-responsive class 创建响应图像。然后图像将很好地缩放到父元素。

Answer 2

JumbleGee，看看Fiddle here.
我的旋转木马从顶部出来，从底部退出。
图片在轮播中响应。
要使图像滑入和滑出，它使用 css，正如您将在代码中看到的那样。

调整大小以查看它如何适合您。
如果调整大小更容易，这里是完整尺寸 Fiddle。

.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 带有可移动图像的轮播

Responsive Bootstrap Carousel with moveable images

css

jquery

carousel

twitter-bootstrap