Question

我现在卡住了，现在不知道如何继续。所以我制作了一个固定高度的Bootstrap Carousel。幻灯片内的图像应该缓慢下降。我现在遇到的问题是，这在我的大屏幕上运行良好。但是当窗口变小时，图片就会超出框架。目前我将图片移动550px。因此，我可以将高度设置为100％，但是当我在转换过程中调整窗口大小时，转换会变慢。

所以我认为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响应类来创建响应式图像。然后，图像将很好地缩放到父元素。

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 Carousel

2 个答案: