Почему картинки в блоке с owl-carousel отображаются неверно?

Question

[Norum]

Как сделать так, чтобы картинки в блоке в галереей отображались по одной и при этом не растягивались? У меня они почему-то показываются все. Пробовал задавать owl-item=100%, но это не помогает.
PS нажимать надо на блок 'Маникюр'

код https://jsfiddle.net/eptdhbvr/

сайт tempeswo.beget.tech

Answer 1

[Икотий Айтишевич]

items
Type: Number
1

The number of items you want to see on the screen.

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})

Answer 2

[fallus]

1. Заменить это;

$('.col.img.owl-carousel').owlCarousel({
  autoplayHoverPause: true,
  nav: true,
  navText: true,
  dots: true,
  autoplay: true,
  center: true,
  loop: true,
  margin: 10,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      margin: 20
    },
    370: {
      items: 2,
      margin: 20
    },
    800: {
      items: 3
    },
    1000: {
      items: 4
    }
  }
})

На это:

// Поместили слайдер в переменную, чтобы потом использовать
var myCarousel = $('.col.img.owl-carousel').owlCarousel({
  autoplayHoverPause: true,
  nav: true,
  navText: true,
  dots: true,
  autoplay: true,
  center: true,
  loop: true,
  margin: 10,
  responsiveClass: true,
  items: 1,
  responsive: {
    0: {
      items: 1,
      margin: 20
    },
    370: {
      items: 2,
      margin: 20
    },
    800: {
      items: 3
    },
    1000: {
      items: 1 // Изменили значение на 1
    }
  }
})

2. Убрать из разметки атрибуты data-fancybox
Из-за них, происходит моментальная инициализация ФенсиБокса. Без настроект.

3. Заменить это:

$().fancybox({
  selector: '.gallery .owl-item:not(.cloned) a'
})

На это:

$('.services .item').fancybox({
  // После того как попап открылся
  afterShow: function(instance, current) {
  // Обновляем слайдер
    myCarousel.trigger('refresh.owl.carousel')
  }
})

Comments

[Norum]

а как мне сделать картинки полноразмерными?