Slider

MGheibi — Tue, 05 Jul 2022 14:19:16 GMT

Hello

I want to have a slider with dynamic number and content of image or video, The content creator want to add or remove images or videos of slider by modules.

Would you please help me?

Re: Slider

Anton — Fri, 08 Jul 2022 06:32:14 GMT

Hi @MGheibi,

if you don't have a developer - there should be at least one slider module in the marketplace.

If you have a developer you could develop a slider by your self.

There are many great slider libraries like slick.js, swiper.js ... out there.

To implement one of those into HubSpot you'd need a custom module with a repeater/for-loop, one of those libraries.

The very basic layout could look like this if you're going with slick.js

{% require_css %} {# change the paths to the CSS files#} <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> {% end_require_css %} <div class="your-class"> {% for single_slide in module.slides %} Layout for each slide {% endfor %} </div> {% require_js %} {# don't need those if you have jQuery already running #} <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> {# slick.min.js is required #} <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.your-class').slick({}); }); </script> {% end_require_js %}

To add a dynamic numer to each slide you could put just

into the for-loop.

The layout should look like this:

... <div class="your-class"> {% for single_slide in module.slides %} Layout for each slide <span class="slide-numer">{{loop.index}}</span> {% endfor %} </div> ...

hope this helps

best,

Anton

topic Slider in CMS Development

Slider

Re: Slider