0

Ola pessoal estou precisando de um auxilio para exibir uma lista de produtos responsivo que inicialmente sera 4 x 4 em telas de computadores (podendo ser alterado conforme a necessidade). O código que eu tenho exibe os itens flex inline, mas eu preciso que ele exiba em colunas e quando o max-height for atingido a largura é aumentada a fim de criar o efeito desejado.

$(".js-carousel").each(function(){
	var $carousel = $(this),
		$carouselContainer = $carousel.find(".js-carousel-container"),
		$carouselList = $carousel.find(".js-carousel-list"),
		$carouselItem = $carousel.find(".js-carousel-item"),
		$carouselButton = $carousel.find(".js-carousel-button"),
		setItemWidth = function(){
			$carouselList.removeAttr("style");
			var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
			$carouselList.css("width", curWidth);
		},
		slide = function(){
			var $button = $(this),
				dir = $button.data("dir"),
				curPos = parseInt($carouselList.css("left")) || 0,
				moveto = 0,
				containerWidth = $carouselContainer.outerWidth(),
				listWidth = $carouselList.outerWidth(),
				before = (curPos + containerWidth),
				after = listWidth + (curPos - containerWidth);
			if(dir=="next"){
				moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
			} else {
				moveto = (before >= 0) ? 0 : curPos + containerWidth;
			}
			
			
			$carouselList.animate({
				left: moveto
			});
		};
	$(window).resize(function(){
		setItemWidth();
	});
	setItemWidth();
	
	$carouselButton.on("click", slide);
});
.carousel{
	padding: 0 30px;
}
.carousel__button--prev, .carousel__button--next{
	position: absolute;
	top: 0;
	bottom: 0;
}
.carousel__button--prev{
	left: 0;
}
.carousel__button--next{
	right: 0;
}
.carousel__container {
	overflow: hidden;
	height: 200px;
}
.carousel__list{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.carousel__list.unwrap{
	flex-wrap: nowrap;
}
.carousel__item{
	flex: 1 0 250px;
/* 	max-width: 300px; */
	height: 200px;
	background-color: #ccc;
	text-align: center;
	line-height: 100px;
	border: 1px solid #fff;
}
<div class="carousel js-carousel">
	<div class="carousel__container js-carousel-container">
		<div class="carousel__list js-carousel-list">
			<div class="carousel__item js-carousel-item">1</div>
			<div class="carousel__item js-carousel-item">2</div>
			<div class="carousel__item js-carousel-item">3</div>
			<div class="carousel__item js-carousel-item">4</div>
			<div class="carousel__item js-carousel-item">5</div>
			<div class="carousel__item js-carousel-item">6</div>
			<div class="carousel__item js-carousel-item">7</div>
			<div class="carousel__item js-carousel-item">8</div>
			<div class="carousel__item js-carousel-item">9</div>
			<div class="carousel__item js-carousel-item">10</div>
		</div>
	</div>
	<div class="carousel__nav">
		<button class="carousel__button--prev js-carousel-button" data-dir="prev">&lt;</button>
		<button class="carousel__button--next js-carousel-button" data-dir="next">&gt;</button>
	</div>
</div>

2
  • Caso o link do stack não execute corretamente vejam no CodePen: codepen.io/seleckis/pen/WwQgvx Commented 20/04/2018 às 20:43
  • Sulivan, vc quer que dependendo da altura da tela o seu slider fique com o número de colunas diferente? Seu pergunta ficou um pouco confusa... Na seria melhor delimitar o número de colunas pela largura max-width e não pela altura max-height...?
    – hugocsl
    Commented 21/04/2018 às 17:18

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .