How can I create this effect on a slider?

I've been able to create a 4 images slider by using jQuery Slick. This is my code:

$(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" alt="1" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="2" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="3" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="4" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="5" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="6" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="7" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="8" />
    </div>
</div>

---

This may help you. Maybe is not the perfect solution because I think it needs some others adjusts, but it works.

$(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" alt="1" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="2" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="3" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="4" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="5" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="6" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="7" />
    </div>
    <div>
        <img src="http://placehold.it/150x200" alt="8" />
    </div>
</div>

---

使用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 height="220" width="200">
    <defs>
        <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern4" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern5" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern6" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern7" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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 height="220" width="200">
    <defs>
        <pattern id="pattern8" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" 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>

链接地址: http://www.djcxy.com/p/41482.html

上一篇: 使用CSS 3垂直对齐

下一篇: 我怎样才能在滑块上创建这种效果？