Responsive Bootstrap Carousel with movingable images

我現在被卡住了，現在不要如何着手。所以我製作了一個固定高度的Bootstrap旋轉木馬。幻燈片中的圖像應該慢慢下降。我現在遇到的問題是，這在我更大的屏幕上運行良好。但是，當窗口變小時，圖片就會出現問題。目前我將550px的圖片向上移動。所以我可以將高度設置爲100％，但在轉換過程中調整窗口大小時，轉換速度會變慢。Responsive Bootstrap Carousel with movingable images

所以我想也許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; 
}

Java類cript

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

來源

2015-06-12 JumbleGee

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

來源

2015-06-13 00:53:03 AngularJR

不錯，謝謝。看起來不錯。這是一個很好的起點，我會試着去適應我的項目。：] Sry爲遲到的響應順便說一句。 – JumbleGee

通過向標籤添加.img響應類來創建響應圖像。圖像將很好地縮放到父元素。

來源

2015-06-12 21:33:37

但我沒有使用和img-Tag。我的圖像作爲div-Tag的背景，因爲Carousel應該有固定的高度。如果我將它放在img-Tag中，那麼Carousel將始終適應圖像的高度。 – JumbleGee

Responsive Bootstrap Carousel with movingable images

回答

相關問題