Personal hello I'm needing help to display a responsive product list that will initially be 4 x 4 on computer screens (and can be changed as needed). The code I have displays flex inline items, but I need it to display in columns and when max-height is reached the width is increased in order to create the desired effect.
$(".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>