Mudar número de itens visiveis ao redimensionar pagina

[Maykel-ctba 233]

Fala galera, bom dia!

 

Tenho um carrossel que está funcionando legal mas preciso fazer uma alteração nele. Gostaria que, ao redimensionar a página, o numero de itens visiveis (option "items") mudasse, para que não comprometesse o layout.

 

Quando estivesse, por exemplo, abaixo de 768px, o "items" deveria ser 3. Acima disso, pode ser 6 mesmo.

 

Isso é possível? Infelizmente o script não me dá essa possibilidade e gostaria de ver algum adendo a ele (vulgo gambiarra).

$(".carousel ul.content").carouFredSel({
	items: 6,	
	prev: ".carousel .left",
	next: ".carousel .right",
	responsive: true,
	scroll : {
		items           : 6,
		duration        : 600,                     
		pauseOnHover    : true
	},
	auto : {
		timeoutDuration : 10000	
	}
});

[Douglas Julião 34]

Man esse exemplo utiliza o mesmo carrousel que o seu:

http://coolcarousels.frebsite.nl/c/19/coolcarousel.html

 

No caso você vai configurar mais ou menos assim:

$('.carousel ul.content').carouFredSel({
  responsive: true,
  items: {
	width: 300, //Essas configs são do exemplo, mais faz um teste ai
	height: '66%',
	visible: {
	    min: 2,
	    max: 5
	}
  }
});

Boa sorte :)

[Maykel-ctba 233]

Caramba, muito bom @Douglas!

 

Adaptando ao meu caso:

$(".carousel ul.content").carouFredSel({
			items: {
				visible: {
					min: 2,
					max: 5
				}
			},	
			prev: ".carousel .left",
			next: ".carousel .right",
			responsive: true,
			scroll : {
				items           : 6,
				duration        : 600,                     
				pauseOnHover    : true
			},
			auto : {
				timeoutDuration : 10000	
			}
		});

Muitíssimo obrigado!

[Douglas Julião 34]

Que bom que funcionou, foi um prazer ajudar haha :)