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"><</button>
<button class="carousel__button--next js-carousel-button" data-dir="next">></button>
</div>
</div>