<h1 class="title">Grid Of Sliders</h1>

<section class="services-grid">

	<section class="services-grid__category">
		<h1>Service Category</h1>
		<div class="service__slider">
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
		</div>
	</section>

	<section class="services-grid__category">
		<h1>Service Category</h1>
				<div class="service__slider">

		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		</div>

	</section>

	<section class="services-grid__category">
		<h1>Service Category</h1>
<div class="service__slider">

		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		<div class="service__card">
			<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
			<h2>Service Title</h2>
		</div>
		</div>

	</section>
	<section class="services-grid__category">
		<h1>Service Category</h1>
		<div class="service__slider">
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
		</div>
	</section>
	<section class="services-grid__category">
		<h1>Service Category</h1>
		<div class="service__slider">
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
		</div>
	</section>
	<section class="services-grid__category">
		<h1>Service Category</h1>
		<div class="service__slider">
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
		</div>
	</section>
	<section class="services-grid__category">
		<h1>Service Category</h1>
		<div class="service__slider">
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
			<div class="service__card">
				<img src="https://harnerdesigns.com/wp-content/uploads/2018/05/logo-spaceship-icon-landed.svg">
				<h2>Service Title</h2>
			</div>
		</div>
	</section>

</section>

[[[https://codepen.io/jackharner/pen/drONOG.html]]]
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-gap: 1em;
	padding: 2em;
}

.services-grid__category {
	max-width: 100%;
	min-width: 0px;
}
.service__slider {
}
.slick-track {
	
}

$colors: #f44336,#E91E63,#9C27B0,#2196F3,#009688,#8BC34A, #FFC107, #FF9800;


	@for $i from 1 through length($colors) {
		.services-grid__category:nth-of-type( #{$i} ){
			
			.slick-track{
			  background: nth($colors, $i);
			}
      

    }
}
.service__card {
	color: #fff;
	text-align: center;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	max-width: 100%;
	min-width: 0px;
	img {
		max-width: 70%;
		padding-top: 0.5em;
	}
}

.title {
	font-size: 4em;
	text-align: center;
	margin: 0.25em;
}
jackHarnerSig(true);

$(".service__slider").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
	dots: true,
	arrows: false,
	autoplay: true,
	autoplaySpeed: 2000, 
	rows: 0,
	pauseOnHover: false
});

External CSS

  1. https://codepen.io/jackharner/pen/drONOG.css
  2. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
  3. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  3. https://codepen.io/jackharner/pen/drONOG.js
  4. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js