# Slider

**URL:** <https://community.hubspot.com/t/slider/60356>\
**Category:** CMS Development\
**Created:** [July 5, 2022, 2:19pm UTC](https://community.hubspot.com/t/slider/60356 "2022-07-05T14:19:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MGheibi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mgheibi/32/75363_2.png) [@MGheibi](https://community.hubspot.com/u/MGheibi)\
**Post date:** [July 5, 2022, 2:19pm UTC](https://community.hubspot.com/t/slider/60356/1 "2022-07-05T14:19:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [July 8, 2022, 6:32am UTC](https://community.hubspot.com/t/slider/60356/2 "2022-07-08T06:32:14Z")

</div>

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](https://kenwheeler.github.io/slick/), [swiper.js](https://swiperjs.com/) … out there.

To implement one of those into HubSpot you’d need a custom module with a [repeater/for-loop](https://developers.hubspot.com/docs/cms/hubl/for-loops), one of those libraries.

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

```lia-code-sample
{% 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:

```lia-code-sample
...
<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