Карусель просмотра изображений - inlineBlock

Question

Я хотел бы создать карусель, используя такой HTML, как этот, в сочетании с slick.js:

.view {
    position: relative;
    width: 47%;
    margin: 1%;
    display:inline-block;
    opacity: 0.4;
  }
  .view.active {
    opacity: 1
  }
  .container_view {
    position: absolute;
    width: 80%;
    left: 0;
    right: 0;
    margin: auto;
    top: 10%;
    overflow-y: hidden;
    text-align: center;
    border: 6px solid orange;
  }

<div class="container_view">
  <div class="slide">
    <img class="view active" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
  </div>
</div>

Сдвиг влево или вправо должен каждый раз отображать следующий слайд . Поэтому я попытался реализовать slick.js, но, очевидно, это был неправильный способ, потому что теперь изображение выглядит довольно разрушенным:

$(function() {
  $(".container_view").slick({
    dots: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
    /*variableWidth: true*/
  })
})

.view {
  position: relative;
  width: 47%;
  margin: 1%;
  display: inline-block;
  opacity: 0.4;
}

.view.active {
  opacity: 1
}

.container_view {
  position: absolute;
  width: 80%;
  left: 0;
  right: 0;
  margin: auto;
  top: 10%;
  overflow-y: hidden;
  text-align: center;
  border: 6px solid orange;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">


<div class="container_view">
  <div class="slide">
    <img class="view active" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
  </div>

  <div class="slide">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view active" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
  </div>
</div>

Как я могу исправить эту карусель , чтобы слайды выглядели как изображение из первого фрагмента? Любая помощь будет очень признательна.

Answer 1

Просто добавьте! Важный для вашего css. который не применяется раньше. или вы можете использовать слайдер Swiper / карусель для сов, что дает вам больше возможностей для показа слайдов на экране, а также в соответствии с разрешением экрана.

Проверьте этот плагин слайдеров с аппаратно ускоренными переходами и удивительным собственным поведением-

1- https://owlcarousel2.github.io/OwlCarousel2/

2- https://idangero.us/swiper/

$(function() {
  $(".container_view").slick({
    dots: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
    /*variableWidth: true*/
  })
})

.view {
  position: relative;
  width: 47%;
  margin: 1%;
  /*Simply Add important to display */
  display: inline-block !important;
  opacity: 0.4;
}

.view.active {
  opacity: 1
}

.container_view {
  position: absolute;
  width: 80%;
  left: 0;
  right: 0;
  margin: auto;
  top: 10%;
  overflow-y: hidden;
  text-align: center;
  border: 6px solid orange;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">


<div class="container_view">
  <div class="slide">
    <img class="view active" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
  </div>

  <div class="slide">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view active" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
    <img class="view" src="https://i1.wp.com/androidkenya.com/wp-content/uploads/2017/05/Stack_Overflow.png?fit=700%2C394&ssl=1">
  </div>
</div>

Answer 2

Я не знаю, является ли это именно тем, что вы ищете, но проблема в том, что к классу .slick-slide img прикреплено свойство display: block, которое перезаписывает display: inline-block класса .view css.

Быстрое исправление - добавить, чтобы добавить тег! Important к классу .view

.view {
  position: relative;
  width: 47%;
  display: inline-block !important;
  opacity: 0.4;
  margin: 1%;
}

Это обеспечит свойство display перезаписывать блок отображения, полученный из .slick-slide img

Смотрите это jsfiddle