Question

我想使用类似slick.js的html来创建轮播：

.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中添加！important即可。以前没有应用。或者，您也可以使用滑动滑块/猫头鹰传送带，从而提供更多选项来显示每个屏幕的幻灯片以及每个屏幕的显示范围。

通过硬件加速过渡和惊人的本机行为检查这些滑块插件-

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

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

查看此jsfiddle

轮播图片视图-inlineBlock

2 个答案: