Slider

[MGheibi]

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?

[Anton · Accepted solution]

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 

{{loop.index}}

 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