javascript - 轮播 ImageView - 内联 block

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，但显然这不是正确的方法，因为 ImageView 现在看起来非常毁坏:

$(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>

如何修复此旋转木马，使幻灯片看起来像第一个片段中的 ImageView ？非常感谢任何帮助。

Answer 1

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

检查这些具有硬件加速转换和惊人的 native 行为的 slider 插件-

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>