Slick Slide Carousel с изображением соседних изображений - PullRequest
Новая
       20

Slick Slide Carousel с изображением соседних изображений

0 голосов
/ 11 марта 2019

У меня есть веб-сайт портфолио (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'>"
  });
});

1 Ответ

0 голосов
/ 11 марта 2019

Я бы посмотрел на отзывчивый аспект

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 */
...