Create a Carousel for LearnDash Course Grid & Lesson List

I was recently asked by a customer of our Design Upgrade Pro for LearnDash plugin if there was a way to improve the view of the course grid output on mobile. She wasn’t pleased with how everything just stacked on top of each other on smaller screens.

Enter the LearnDash course grid carousel 🎉! With a little CSS, we can create a beautiful, scrolling carousel in LearnDash.

I have confirmed this works with the older version of the LearnDash course grid, when using [ld_course_list] or the “Course List” block. If you want to use it with the newer version of the course grid (i.e. “Course Grid” block), comment a link to a page on your site that is using it, and I’ll adjust the CSS for you.

Carousel CSS

We’re going to use flexbox, along with some scroll & overflow properties to make it all work.

• Feel free to adjust the width and max-width properties to your desired size.
• We’ll be using a media query for all screens below 768px, but feel free to adjust the screen size, or remove it completely for a course grid carousel on all screens.

Add the following code to the Additional CSS area of your Customizer (Appearance > Customize > Additional CSS):

/* LearnDash Lesson List to carousel on mobile */
@media (max-width:768px) {
	.ld-course-list-items.row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
	}
	div.ld-course-list-content .ld_course_grid {
		scroll-snap-align: center;
		flex-shrink: 0;
		width: calc(100vw - 50px);
		max-width: 300px !important;
		height: auto;
		margin-right: 20px !important;
		transform-origin: center center;
		transform: scale(1);
		transition: transform 0.5s;
	}
}

First, we target the parent item that contains all the LearnDash course grid items.

• flex-wrap: nowrap; ensures that our grid items flow offscreen
• overflow-x: auto; ensures that the grid items (now offscreen) can be found. This adds a scrollbar.
• scroll-snap-type: x mandatory; forces the scrolling to snap to the grid items
• scroll-behavior: smooth; creates a smooth scrolling experience

Then, on each grid item, we do the following:

• scroll-snap-align: center; makes the grid items stop in the center of the viewport. You can try changing this to start or end.
• width & max-width are used to control the size of the grid items. You can play around with these values to create smaller or larger items. I did a calculation that takes 100% of the viewport and subtracts 50px. This pairs with the amount of space between each item (margin-right) and ensures the next and previous grid items can always be seen.
• The transform & transition properties help create a smooth scrolling transition from one grid item to the next.

I needed to use some !important declarations in order to override some of LearnDash’s CSS, as well as some CSS that we use in the Design Upgrade plugin to improve the grid on larger screens.

Video

Here’s a quick video showing you the effect:

Let me know in the comments if you have any questions, challenges implementing this carousel effect, or just want to show it off on your site!