如何在滑块上创建这种效果？

Posted

技术标签:

【中文标题】如何在滑块上创建这种效果？【英文标题】：How can I create this effect on a slider? 【发布时间】：2018-08-06 02:34:18 【问题描述】：

我已经能够使用 jQuery Slick 创建一个 4 图像滑块。这是我的代码：

$(function()
    $('.slider').slick(
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
    );
);
/* Default CSS for Slick library */
.slick-slider 
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  .product-item-info-slick 
    display: inline-block;
    width: 24%;
  


.slick-list 
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  &:focus 
    outline: none;
  

  &.dragging 
    cursor: pointer;
    cursor: hand;
  


.slick-slider .slick-track,
.slick-slider .slick-list 
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);


.slick-track 
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after 
    content: "";
    display: table;
  

  &:after 
    clear: both;
  

  .slick-loading & 
    visibility: hidden;
  


.slick-slide 
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & 
    float: right;
  
  img 
    display: block;
  
  img.photo.image 
    height: 300px;
  
  &.slick-loading img 
    display: none;
  

  display: none;

  &.dragging img 
    pointer-events: none;
  

  .slick-initialized & 
    display: block;
  

  .slick-loading & 
    visibility: hidden;
  

  .slick-vertical & 
    display: block;
    height: auto;
    border: 1px solid transparent;
  


.slick-arrow.slick-hidden 
  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://pimg.com.ar/hammer/slick.min.js"></script>

<!-- Slider -->
<div class="slider">
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
</div>

但是如何在图像之间创建分隔线效果？我猜 CSS 是可能的，但我不确定如何。

【问题讨论】：

【参考方案1】：

这可能会对您有所帮助。也许不是完美的解决方案，因为我认为它需要其他一些调整，但它确实有效。

$(function()
    $('.slider').slick(
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4
    );
);
/* Default CSS for Slick library */
.slick-slider 
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  .product-item-info-slick 
    display: inline-block;
    width: 24%;
  


.slick-list 
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  &:focus 
    outline: none;
  

  &.dragging 
    cursor: pointer;
    cursor: hand;
  


.slick-slider .slick-track,
.slick-slider .slick-list 
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);


.slick-track 
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after 
    content: "";
    display: table;
  

  &:after 
    clear: both;
  

  .slick-loading & 
    visibility: hidden;
  


.slick-slide 
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & 
    float: right;
  
  img 
    display: block;
  
  img.photo.image 
    height: 300px;
  
  &.slick-loading img 
    display: none;
  

  display: none;

  &.dragging img 
    pointer-events: none;
  

  .slick-initialized & 
    display: block;
  

  .slick-loading & 
    visibility: hidden;
  

  .slick-vertical & 
    display: block;
    height: auto;
    border: 1px solid transparent;
  


.slick-arrow.slick-hidden 
  display: none;


.slick-slide 
  transform: rotate(-10deg) scale(1.15,1.15) !important;
  margin: 0 13px;
  overflow: hidden;


.slick-slide img 
  transform: rotate(10deg) scale(1.22,1.22) !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://pimg.com.ar/hammer/slick.min.js"></script>

<!-- Slider -->
<div class="slider">
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
    <div>
        <img src="http://placehold.it/150x200"  />
    </div>
</div>

【讨论】：

【参考方案2】：

使用 svg 多边形（工作示例）：

$(function() 
  $('.slider').slick(
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1
  );
);
.slick-slide
  outline: none;


.slick-prev
  left: 20px !important;
  z-index: 9999;


.slick-next
  right: 20px !important;
  z-index: 9999;


.slider svg 
  stroke-width: 0;

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<!-- Slider -->
<div class="slider">
  <div>
    <svg  >
    <defs>
        <pattern id="pattern1"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=1" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern1);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern2"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=2" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern2);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern3"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=3" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern3);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern4"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=4" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern4);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern5"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=5" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern4);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern6"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=6" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern6);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern7"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=7" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern7);" />
    </svg>
  </div>
  
  <div>
    <svg  >
    <defs>
        <pattern id="pattern8"   patternContentUnits="objectBoundingBox">
            <image   preserveAspectRatio="xMinYMin slice" xlink:href="https://picsum.photos/420/320?image=8" />
        </pattern>
    </defs>
      <polygon points="50,0 180,0 140,200 10,200" style="fill:url(#pattern8);" />
    </svg>
  </div>
  
</div>

【讨论】：

以上是关于如何在滑块上创建这种效果？的主要内容，如果未能解决你的问题，请参考以下文章

如何在magento 1.9中的cms主页滑块上显示类别？

如何使 CAGradientLayer 中的渐变跟随滑块上的某个值？

切换视频源 - 同时在滑块上 - JS、HTML5 视频

jquery ui滑块-如何反转范围选择

到达一端时如何在点击滑块上制作无限过渡效果？ （过渡问题）

当用户将鼠标悬停在滑块上时，使光标成为手