Отзывчивый ползунок полной ширины, но фиксированной высоты

Я хочу сделать адаптивный слайдер с фиксированной высотой, например http://blog.invisionapp.com.

Как это сделать?

Я написал следующий код (также сделал JSFiddle):

HTML

<div id="img-carousel" data-ride="carousel" class="carousel slide">
  <!-- Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#img-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#img-carousel" data-slide-to="1"></li>
    <li data-target="#img-carousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides-->
  <div role="listbox" class="carousel-inner">
    <div class="item active"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Caption Animation</h2>
        <p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p>
      </div>
    </div>
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated bounceInDown">Bootstrap Slider</h2>
        <p class="animated bounceInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Get Started</a></p>
      </div>
    </div>
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Mobile Friendly</h2>
        <p class="animated fadeInRight"><a href="#" class="btn btn-transparent btn-rounded btn-large">Download Now!</a></p>
      </div>
    </div>
  </div>
  <!-- Controls--><a href="#img-carousel" role="button" data-slide="prev" class="left carousel-control"><i aria-hidden="true" class="fa fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="#img-carousel" role="button" data-slide="next" class="right carousel-control"><i aria-hidden="true" class="fa fa-chevron-right"></i><span class="sr-only">Next</span></a>
</div>

CSS

.carousel-inner .item {
  max-height: 680px;
}
.carousel-inner .item:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.carousel-control {
  width: 10%;
}

.carousel-control .fa {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .fa.fa-chevron-right {
  right: 50%;
  margin-right: -10px;
}

@media screen and (min-width: 768px) {
  .carousel-control .fa {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }
}
@media screen and (min-width: 768px) {
  .carousel-control .fa-chevron-left {
    margin-left: -15px;
  }
}
/**
 * Slider caption
 */
 .right.carousel-control, .left.carousel-control {
    display: none;
}
.carousel-caption h2 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.carousel-caption p {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .carousel-caption {
    right: 20%;
    left: 20%;
    bottom: 20%;
  }
}
.btn-transparent {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-transparent:hover {
  background-color: #fff;
}

.btn-rounded {
  border-radius: 70px;
}

.btn-large {
  padding: 11px 45px;
  font-size: 18px;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}


.blogs img{
  width: 100%;
}

JAVASCRIPT

$('.carousel').carousel({
    pause: 'none'
})

javascript html responsive-design twitter-bootstrap full-width
person nikolas    schedule 10.09.2016    source источник
comment
Вы сможете найти ответ здесь или многие другие вопросы о высоте карусели Bootstrap   -  person Zim    schedule 10.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Настройте карусель следующим образом. 2000 пикселей — это максимальное значение ширины, которое вы хотите.

.carousel.slide{
    max-width: 2000px;
    overflow: hidden;
}
.carousel-inner{
   width: 2000px;
   left: 50%;
   margin-left: -1000px;
}

Демонстрация: http://www.bootply.com/Z8eLP7G4MN

person Zim    schedule 10.09.2016
comment
Спасибо. Но я хочу сделать это как blog.invisionapp.com - person nikolas; 10.09.2016

arrow_upward
0
arrow_downward

Просто включите следующий стиль img в свой css.

Отрегулируйте значение перевода по оси Y, чтобы расположить изображение в нужном разделе.

Проверьте рабочий пример на CODEPEN.

надеюсь это работает

@media screen and (min-width: 768px) {
  .carousel-control .fa-chevron-left {
    margin-left: -15px;
  }
  img{
    display: block;
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    object-fit: contain;
    position: relative;
    top: 50%;
    transform: translate(-50%, 0%);
    width: auto;
  }
}
person Jyoti Pathania    schedule 10.09.2016
comment
Спасибо. Но я хочу сделать его похожим на blog.invisionapp.com - person nikolas; 10.09.2016