显示部分相邻图像的 Slick Slide Carousel

Question

我有一个投资组合网站 (http://viktorjorneryd.com/?pid=4)，在移动设备上，我将光滑的幻灯片轮播限制为只能显示一张图片。如果是宽幅图片，则单独显示，如果是垂直图片，则一次预览两个。在计算机上（以及调整大小时）没问题，但在移动设备上它会在宽照片旁边显示一小部分垂直照片，这破坏了设计。

https://www.dropbox.com/s/wpsjavhxlbp67if/Screenshot_20190311-175421_Chrome.jpg?dl=0

这是它的外观图片。我试图使图片更宽以匹配彼此相邻的两张垂直照片 - 但无济于事。我没有想法，我什至不确定为什么会导致这种情况..

这是漂亮的幻灯片配置。

 $(document).ready(function(){
   $('.slider_image_wrap_mobile').slick({
    infinite: true,
    speed: 100,
    fade: false,
    cssEase: 'linear',
    arrows: true,
    nextArrow: "<img class='slider_control_right' src='images/webinterface/arrow_png.png'>",
    prevArrow: "<img class='slider_control_left' src='images/webinterface/arrow_png.png'>"
  });
});

Answer 1

我会看看响应方面

http://kenwheeler.github.io/slick/

您可以定义断点并限制显示的幻灯片。

  responsive: [
    {
      breakpoint: 1024,  // The media breakpoint
      settings: {
        slidesToShow: 3,    // how many images you want to show in your case 1
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },

我进一步研究了这个问题，似乎已经解决了。

.slider_image_single {
    ...
    padding: 1px; /* this one */

显示部分相邻图像的 Slick Slide Carousel

Slick Slide Carousel showing parts of neighbor images

javascript

css

image

slide

slick.js