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.
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>
...
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>
...