Custom image slider

[Matt1986]

Hi 

I would like to create a custom module image slider, so i have control over the design. However i only have experience with html and CSS, and i know very little regarding Javascript. 

Is there a image slider template which i can use and then add my own css to it. I have tried looking on the hubspot marketplace, but couldn't find a decent image slider. I have also tried cloning the image slider custom module, however i cant seem to add this to my webpages (wondering if this isn't supported anymore??)

What is the best option for me? Thank you for any help regarding this.  

Much appreciated

Regards

Matt

[Stephanie-OG · Accepted solution]

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

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[SonjaElena]

Hi Stephanie,

I was looking for a way to create an image slider in a custom module as well and the solution with Flickity was the first thing that actually worked for me - thanks! 🙂

BUT - oddly enough the first image slider generated on my page doesn't seem to work, although the ones following that one are fine. Any ideas what might be causing this? 

http://gramm-medical-6269990.hs-sites.com/de/actiomedic/pflaster

Thank you so much in advance!

Sonja

[Matt1986]

Hi Stephanie

I have followed your steps, however i cant seem to link the coded files to the custom module correctly. i have tried downloading to file manager and also copy and pasted the coded directly into new coded files in design manager. however both havn't worked. Please see screenshot below for what i have done so far.

Is there something i have forgotten to do.

thank you for your help

kind regards

Matt

[Stephanie-OG]

Hi Matt, 

I don't think you need any of the jQuery function or document.ready wrappers. Also, you can remove the "..." from the HTML. 

Aside from that, unless there's an issue with the CSS/JS files you've pasted in, I can't spot any issues. 

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[tara17x]

Hello

Please can someone help, i have created the customer module but struggling with how to add images?

Thanks

[Matt1986]

Hi

Ignore my message above, i have just reliased what i have done wrong. 

thanks for your reply it was very helpful!

much appreciated

Matt