Creating a slide show

Marketing & Content Hub Blog, Website & Page Publishing
6

Hi @GSmith5,

just a tipp before getting into the module creation: if you’re working with a default or marketplace theme I recommend you to create a child-theme and use it as your default theme (if you haven’t already). The benefit of a child-theme is that you can enhance&modify elements from the default/marketplace theme.

About the hero-slider: It’s a quite common module(but also got it’s drawbacks) and there are many different solutions how you can achieve this.

My personal go-to approach is this:

First decide which slider script you’d like to use - there are A LOT of them out there. To save you some time here’s a list of the most common once which are easy to work with within HubSpot:

  • slick slider - a bit older than others from the list but very light weight and gets the job done in most cases
  • swiperJS - a very modern and very customizable script but might have to many options in most cases
  • SplideJS - very similar to swiperJS but has some “under-the-hood” differences

Simply look at the most basic layout and the functionality in the documentation of each script and decide which is more appealing/better fitting to the usecase.

Or you can look for “pure” HTML+CSS solutions on pages like codepen but I don’t recommend that since it’s gonna be a lot more work in most cases

Once you’ve choosen a script you like head over to your Design-Tools (since it’s easier) but you check out the local development option.

To keep it as easy as possible I’ll describe the Design-Tool way from here.

  1. create a new module
    • If you’re working with a child theme, open the child-theme folder and right-click on the modules folder. If you don’t use one you can select “New” - “New file” in the left sidebar
    • Select “Module” in the dropdown and click next
    • Select the page types you’d like to use the module in (important: don’t select email if available since this module won’t work in emails)
    • select if it should be a local or global module
      • local module: can be used on several pages or several times on one page with different content
      • global module: can be used on several pages or several times on one page with the same content; great if you want to display the same content multiple times without put in the content each time
  2. Add the core functions you want/need each slide to have via the Fields in the right sidebar. My recommendations from what I see in your shared screenshot:
    • Image for background ( name: Slide background)
    • Text for headline ( name: Headline )
    • Text for subline ( name: Subline )
    • Link for button ( name: Button URL )
    • Text for button ( name: Button label )
  3. Group all elements(Actions → Group) - most importantly - enable the repeater option(at the very bottom of the right sidebar) inside this group
  4. Write the code. For demo purposes I’ll go with the swiperJS but it’s basically the same for each script

HTML+Hubl area:

{# start Slider CSS #}
{% require_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/> {# the stylesheet of the slider #}

<style> {# custom styling; feel free to modify or use existing classes from your theme #}
	{% scope_css %}
	.swiper-slide.image-bg{
		background-size:cover !important; {# required #}
		background-position:center center; {# required #}
		min-height:40vh;
		padding-top:5rem;
		padding-bottom:5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.content-wrapper{
		max-width:80%;
		width:100%;
		margin:0 auto;
	}
	{% end_scope_css %}
</style>
{% end_require_css %}
{# end Slider CSS #}

{# start module layout #}
<div class="hero-slider">
	<div class="swiper-wrapper">
		{# start single slide #}
		{% for single_slide in module.slides %}
		<div class="swiper-slide image-bg" style="background:url('{{ single_slide.background_image.src }}')">
			<div class="content-wrapper">
				<h1>{{ single_slide.headline }}</h1>
				<p class="hero-slider-subline">{{ single_slide.subline }}</p>
				{# start button #}
				{% if single_slide.button_url.url.href %}
				{% set href = single_slide.button_url.url.href %}
				{% if single_slide.button_url.url.type is equalto "EMAIL_ADDRESS" %}
				{% set href = "mailto:" + href %}
				{% endif %}
				<a href="{{ href }}"{% if single_slide.button_url.open_in_new_tab %} target="_blank"{% endif %}{% if single_slide.button_url.rel %} rel="{{ single_slide.button_url.rel }}"{% endif %} class="{# replace this with your button class(es) #}">
					{{ single_slide.button_label }}
				</a>
				{% endif %}
				{# end button #}
			</div>
		</div>
		{% endfor %}
		{# end single slide #}
	</div>
</div>
{# end module layout #}

{# start Slider script #}
{% require_js %}
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> {# the slider script #}

{# Initialize Swiper #}
<script>
	var swiper = new Swiper(".hero-slider", {
		{# check out the docs of your chosen slider script for follwing options #}
		slidesPerView: 1,
		spaceBetween: 30,
		loop: true
	});
</script>
{% end_require_js %}

:tada: congrats! You’ve done the biggest part.

The only thing left is the CSS part. If you need more guideance on this - will be happy to help

best,

Anton