Products Slider

Featured Products

Echo 60 label

Echo 60

$3.00 / Square foot

Details Buy Now
Echo 80 Plus label

Echo 80 Plus

$4.00 / Square foot

Details Buy Now
Echo 80 label

Echo 80

$4.50 / Square foot

Details Buy Now
Echo 80 Plus Artificial Grass for Indoor / Outdoor Sports Turf label

Echo 80 Plus Artificial Grass for Indoor / Outdoor Sports Turf

$5.00 / Square foot

Details Buy Now
Echo Supreme label

Echo Supreme

$5.50 / Square foot

Details Buy Now
Echo Supreme Plus label

Echo Supreme Plus

$6.00 / Square foot

Details Buy Now

PHP
<?php
	$products = array(
		array('name' => 'Echo 60', 'price' => '3.00', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
		array('name' => 'Echo 80 Plus', 'price' => '4.00', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
		array('name' => 'Echo 80', 'price' => '4.50', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
		array('name' => 'Echo 80 Plus Artificial Grass for Indoor / Outdoor Sports Turf', 'price' => '5.00', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
		array('name' => 'Echo Supreme', 'price' => '5.50', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
		array('name' => 'Echo Supreme Plus', 'price' => '6.00', 'image' => '/img/featured_product.jpg', 'label' => '/img/product_label.png'),
	);
?>
	
<section class="products_slider_section">
	<div class="wrapper">
		<h2>Featured Products</h2>
		<div class="featured_products_slider hidden_slider" data-slider="featured_products_slider">
			<?php foreach ($products as $item): ?>
				<div class="product_slider_item">
					<a href="#" class="img_wrap">
						<img src="<?= $item['image'] ?>" alt="<?= $item['name'] ?>">
						<img src="<?= $item['label'] ?>" alt="label" class="product_label">
					</a>
					<h3><a href="#"><?= $item['name'] ?></a></h3>
					<div class="buttons_wrap">
						<p class="price_info"><span>$<?= $item['price'] ?></span> / Square foot </p>
						<a href="#" class="button">Details</a>
						<a href="#" class="button || black">Buy Now</a>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
CSS
/* карточки однакової висоти */
.slick-track {display: flex !important;}
.slick-track .slick-slide {display: flex !important; flex-direction: column; height: auto !important;}
CSS
.products_slider_section{background-color:#fafafa;padding:5.7rem 0 9.4rem}
.products_slider_section h2,.products_slider_section .h2{font-size:5rem;line-height:1.2;text-align:center;color:#76c043}

.featured_products_slider{margin:6.4rem 0 0}
.featured_products_slider .slick-track{display:-webkit-box!important;display:-webkit-flex!important;display:-moz-box!important;display:-ms-flexbox!important;display:flex!important}
.featured_products_slider .slick-track .slick-slide{display:-webkit-box!important;display:-webkit-flex!important;display:-moz-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto!important}
.featured_products_slider.hidden_slider{opacity:0;overflow:hidden;max-height:42rem}
.featured_products_slider .slick-prev::after,.featured_products_slider .slick-next::after{border-color:#76c043}
.featured_products_slider .slick-prev{left:-3.5rem}
.featured_products_slider .slick-next{right:-3.5rem}
.featured_products_slider .slick-dots{bottom:-6rem}
.featured_products_slider .slick-dots li{border:.1rem solid #76c043}
.featured_products_slider .slick-dots li.slick-active{background:#76c043}

.product_slider_item{margin:0 2.3rem;text-align:center;position:relative;background-color:#fff;padding:0 0 13rem}
.product_slider_item .img_wrap{display:block;position:relative;overflow:hidden;padding-top:61%;margin:0 0 .6rem}
.product_slider_item .img_wrap img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A	'}
.product_slider_item .img_wrap .product_label{position:absolute;top:3rem;right:5rem;left:auto;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;display:block;width:4.6rem;height:7.1rem;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A	'}
.product_slider_item h3{font-size:2rem;font-weight:700;color:#25481e;line-height:1.2;max-width:80%;margin:0 auto .8rem;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.product_slider_item .price_info{color:#25481e;font-size:1.6rem;font-weight:700;text-transform:uppercase;line-height:1.2;letter-spacing:1.2px;margin:0 0 1.5rem;padding:0 .5rem}
.product_slider_item .price_info span{color:#76c043;font-size:3.5rem}
.product_slider_item .buttons_wrap{position:absolute;font-size:0;left:0;width:100%;bottom:2.5rem}
.product_slider_item .buttons_wrap .button{margin:0 .7rem;min-width:auto;}

@media only screen and (max-width: 1300px) {
	.products_slider_section{padding:4rem 0 8.5rem}
	.products_slider_section h2,.products_slider_section .h2{font-size:4rem}
	.featured_products_slider{margin:5rem 0 0}
	.product_slider_item .price_info span{font-size:3rem}
}

@media only screen and (max-width: 992px) {
	.products_slider_section h2,.products_slider_section .h2{font-size:3.5rem}
	.products_slider_section{padding:3rem 0 7rem}
	.featured_products_slider{margin:4rem 0 0}
	.featured_products_slider .slick-dots{bottom:-4.5rem}
	.featured_products_slider .slick-dots li{width:1.2rem;height:1.2rem;margin:0 .3rem}
}

@media only screen and (max-width: 700px) {
	.products_slider_section{padding:1.5rem 0 7rem}
	.product_slider_item{margin:0}
	.featured_products_slider{margin:2.5rem 0 0}
	.products_slider_section h2,.products_slider_section .h2{font-size:3rem}
	.product_slider_item .price_info span{font-size:2.6rem}
	.product_slider_item .price_info{font-size:1.4rem}
}
SCSS
.products_slider_section {
	background-color: #fafafa;
	padding: 5.7rem 0 9.4rem;
	
	h2, .h2 {
		font-size: 5rem;
		line-height: 1.2;
		text-align: center;
		color: #76c043;
	}
}

.featured_products_slider {
	margin: 6.4rem 0 0;
	
	.slick-track {
		display: flex !important;
		
		.slick-slide {
			display: flex !important;
			flex-direction: column;
			height: auto !important;
		}
	}
	
	&.hidden_slider {
		opacity: 0;
		overflow: hidden;
		max-height: 42rem;
	}
	
	.slick-prev, .slick-next {
		&::after {
			border-color: #76c043;
		}
		
	}
	
	.slick-prev {
		left: -3.5rem;
	}
	
	.slick-next {
		right: -3.5rem;
	}
	
	.slick-dots {
		bottom: -6rem;
		
		li {
			border: .1rem solid #76c043;
			
			&.slick-active {
				background: #76c043;
			}
		}
	}
}

.product_slider_item {
	margin: 0 2.3rem;
	text-align: center;
	position: relative;
	background-color: #ffffff;
	padding: 0 0 13rem;
	
	.img_wrap {
		display: block;
		position: relative;
		overflow: hidden;
		padding-top: 61%;
		margin: 0 0 0.6rem;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			-webkit-transition: .3s linear;
			-o-transition: .3s linear;
			-moz-transition: .3s linear;
			transition: .3s linear;
			-o-object-fit: contain;
			object-fit: contain;
			font-family: 'object-fit: contain;';
		}
		
		.product_label {
			position: absolute;
			top: 3rem;
			right: 5rem;
			left: auto;
			transform: none;
			display: block;
			width: 4.6rem;
			height: 7.1rem;
			-o-object-fit: contain;
			object-fit: contain;
			font-family: 'object-fit: contain;';
		}
	}
	
	h3 {
		font-size: 2rem;
		font-weight: 700;
		color: #25481e;
		line-height: 1.2;
		max-width: 80%;
		margin: 0 auto 0.8rem;
		transition: .3s linear;
	}
	
	.price_info {
		color: #25481e;
		font-size: 1.6rem;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.2;
		letter-spacing: 1.2px;
		margin: 0 0 1.5rem;
		padding:0 .5rem;
		
		span {
			color: #76c043;
			font-size: 3.5rem;
		}
	}
	
	.buttons_wrap {
		position: absolute;
		font-size: 0;
		left: 0;
		width: 100%;
		bottom: 2.5rem;
		
		.button {
			margin: 0 .7rem;
			min-width: auto;
		}
	}
}

@media only screen and (max-width: 1300px) {
	.products_slider_section {padding: 4rem 0 8.5rem;}
	.products_slider_section h2, .products_slider_section .h2 {font-size: 4rem;}
	.featured_products_slider {margin: 5rem 0 0;}
	.product_slider_item .price_info span {font-size: 3rem;}
}

@media only screen and (max-width: 992px) {
	.products_slider_section h2, .products_slider_section .h2 {font-size: 3.5rem;}
	.products_slider_section {padding: 3rem 0 7rem;}
	.featured_products_slider {margin: 4rem 0 0;}
	.featured_products_slider .slick-dots {bottom: -4.5rem;}
	.featured_products_slider .slick-dots li {width: 1.2rem;height: 1.2rem;margin: 0 0.3rem;}
}

@media only screen and (max-width: 700px) {
	.products_slider_section {padding: 1.5rem 0 7rem;}
	.product_slider_item {margin: 0;}
	.featured_products_slider {margin: 2.5rem 0 0;}
	.products_slider_section h2, .products_slider_section .h2 {font-size: 3rem;}
	.product_slider_item .price_info span {font-size: 2.6rem;}
	.product_slider_item .price_info {font-size: 1.4rem;}
}
JavaScript
$('.featured_products_slider').slick({
	arrows: true,
	dots: true,
	infinite: true,
	autoplay: false,
	autoplaySpeed: 5000,
	slidesToShow: 3,
	slidesToScroll: 3,
	responsive: [
		{
			breakpoint: 1420,
			settings: {
				arrows: false
			}
		},
		{
			breakpoint: 1100,
			settings: {
				arrows: false,
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 701,
			settings: {
				arrows: false,
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}
	]
});