轮播图像视图 - 内联块

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

我不知道这是否正是您要查找的内容，但问题是 .slick-slide img class 附有 display: block 属性，它会覆盖 .view css class 上的 display: inline-block。

快速修复是添加 !important 标签到 .view class

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

这将确保显示属性覆盖来自 .slick-slide img

的显示块

看到这个jsfiddle

Answer 2

只需将 !important 添加到您的 css 即可。以前没有应用过。或者您可以使用 swiper slider/Owl 轮播，它为您提供了更多选项来显示每个屏幕的幻灯片，也可以根据屏幕分辨率显示幻灯片。

检查这些具有硬件加速转换和惊人本机行为的滑块插件-

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>

轮播图像视图 - 内联块

Carousel image view - inlineBlock

html

javascript

css

jquery

slick.js