Hi Matt,
You can find pre-built sliders online so that you don’t have to code them from scratch. A popular option is Slick Slider but I like to use Flickity.
What I usually do is add the Flickity CSS and Flickity JavaScript files to HubSpot (create a new CSS and new JS file and add the code respectively) and then link to each of those files in a custom module.
Then in the HTML + HubL section of your custom module you can add something like this:
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>
And in the JavaScript section of your custom module add something like this:
$('.main-carousel').flickity({
// options
});
The above will let you hard code your slider but if you want to let users add new slides at the page level, you can create fields on the right-hand side of the module, group them and set that group to a “Repeater” to give users the option to add multiple slides, which will look something like this:
<div class="main-carousel">
{% for item in module.mygroup %}
<div class="carousel-cell">
{{ item.rich_text }}
</div>
{% endfor %}
</div>
The Flickity website has lots of customisations that you can add to the jQuery options above or CSS you can use to style the slider.
I hope that helps!
HubSpot Design / Development
If this helped, please mark it as the solution to your question, thanks!