Гладкая карусель слайдов, показывающая части соседних изображений

#javascript #css #image #slide #slick.js

#javascript #css #изображение #слайд #slick.js

Вопрос:

У меня есть веб-сайт-портфолио (http://viktorjorneryd.com/?pid=4 ) там, где на мобильных устройствах у меня гладкая карусель слайдов, ограниченная отображением одного изображения. Если это широкое изображение, оно отображается само по себе, а если оно вертикальное, они просматриваются по два за раз. На компьютере (и при изменении размера) это нормально, но на мобильных устройствах отображается небольшая часть вертикальных фотографий рядом с широкой, что нарушает дизайн.

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

Вот картинка того, как это выглядит. Я пытался сделать изображение шире, чтобы соответствовать двум вертикальным фотографиям рядом друг с другом — безрезультатно. У меня закончились идеи, и я даже не уверен, почему это вызывает это..

Вот конфигурация слайдов slick.

  $(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'>"
  });
});

Ответ №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 */