owl-carousel отображение двух товаров в мобильной версии

[MrEvgen]

Привет,

отобразил рекомендуемые в мобильной версии в карусели.

Отобразил на 50%, рассчитывая, что будет два товара и по одному листать из двух.

Но отображает в карусели один товар и листает по одному.

 

Подскажите, пожалуйста, где настроить количество отображаемого товара в owl-carousel в мобильной версии?

 

 

 

 

Спасибо

Змінено 17 червня 2022 користувачем MrEvgen

[3DO]

18.06.2022 в 01:48, MrEvgen сказал:

Привет,

отобразил рекомендуемые в мобильной версии в карусели.

Отобразил на 50%, рассчитывая, что будет два товара и по одному листать из двух.

Но отображает в карусели один товар и листает по одному.

 

Подскажите, пожалуйста, где настроить количество отображаемого товара в owl-carousel в мобильной версии

Спасибо

 

breakpoints

https://swiperjs.com/swiper-api

[FastOptimizer]

18.06.2022 в 01:48, MrEvgen сказал:

Привет,

отобразил рекомендуемые в мобильной версии в карусели.

Отобразил на 50%, рассчитывая, что будет два товара и по одному листать из двух.

Но отображает в карусели один товар и листает по одному.

 

Подскажите, пожалуйста, где настроить количество отображаемого товара в owl-carousel в мобильной версии?

 

 

 

 

Спасибо

itemsCustom: [[0, 1], [500, 2], [750, 4], [1000,6]]

Дальше думаю разберетесь

[Eldaeron]

Не разберетесь, вам скинули на swiperjs, а нужно на https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

 

Правда у нас наверное старая 1 версия, там методы могут отличаться.

 

И еще момент, если на мобильном хотите вывод 2, то при прокрутке, будут сразу 2 меняться, это нужно учесть.

 

Ваш код:  (как пример), видим для адаптивного используеться обьект responsive с набором свойств.

 

$('#banner<?php echo $module; ?>').owlCarousel({
	responsive : {
		// С нуля до 768рх будет по 2 итема
		0 : {
        items: 2
      },
	  // с 768рх и выше по 3 итема
		768 : {
			items: 3
		},
		// с 1024рх и выше по 4 итема
		1024 : {
			items: 4
		},
	},
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: false,
	pagination: false,
	transitionStyle: 'fade'
});

 

[FastOptimizer]

18.06.2022 в 08:06, Eldaeron сказал:

Не разберетесь, вам скинули на swiperjs, а нужно на https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

 

Правда у нас наверное старая 1 версия, там методы могут отличаться.

 

И еще момент, если на мобильном хотите вывод 2, то при прокрутке, будут сразу 2 меняться, это нужно учесть.

 

Ваш код:  (как пример), видим для адаптивного используеться обьект responsive с набором свойств.

 

$('#banner<?php echo $module; ?>').owlCarousel({
	responsive : {
		// С нуля до 768рх будет по 2 итема
		0 : {
        items: 2
      },
	  // с 768рх и выше по 3 итема
		768 : {
			items: 3
		},
		// с 1024рх и выше по 4 итема
		1024 : {
			items: 4
		},
	},
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: false,
	pagination: false,
	transitionStyle: 'fade'
});

 

Не знаете - не пишите

я скинул от первой совы

[MrEvgen]

ВСЕМ СПАСИБО!