Custom image slider

SOLVE
Highlighted
Regular Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

 

View solution in original post

5 Replies 5
Highlighted
Solution
Regular Advisor

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

 

View solution in original post

Highlighted
Regular Contributor

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.

 

Capture1.PNG

 

Is there something i have forgotten to do.

 

thank you for your help

 

kind regards

Matt

Reply
0 Upvotes
Highlighted
Regular Contributor

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

Reply
0 Upvotes
Highlighted
Regular Advisor

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. 

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

Highlighted
New Contributor

Hello

 

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

 

Thanks

Reply
0 Upvotes