带有可移动图像的响应式引导轮播答案

【问题标题】：Responsive Bootstrap Carousel with moveable images带有可移动图像的响应式引导轮播
【发布时间】：2015-06-12 21:24:38
【问题描述】：

我现在陷入困境，现在不知道如何继续。所以我做了一个固定高度的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");
})

【问题讨论】：

标签： jquery css twitter-bootstrap carousel

【解决方案1】：

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

【讨论】：

很好，谢谢。看起来不错。这是一个很好的起点，我会尝试使其适应我的项目。 :] 抱歉，btw 回复晚了。

【解决方案2】：

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

【讨论】：

但我没有使用和 img-Tag。我的图像在 div-Tag 中作为背景，因为 Carousel 应该有一个固定的高度。如果我将它放在 img-Tag 中，那么 Carousel 将始终适应图像的高度。