add an article slider in the blog listing

Developer Support CMS Development
1

I would like to have a slider with my “mes articles les plus récent” articles in a mobile version. Is this feasible? If yes, how ? I can’t find the solution to integrate a slider with the articles.

this is my blog : https://app.hubspot.com/design-previewer/2660472/templates/158848154881

and the code :

{% if not topic %}
<div class="blog__listing"> 
 <div class="container">
 <div class="row">
 <div class="col-12 col-md-6">
 <div class="blog__titre">
 {% module "module_16878528674643732" path="/TEMPLATE/Blog/Customs modules/Blog - Titre principal", label="Blog - Titre principal" %}
 </div>
 </div>
 </div>
 {% set i = 1 %}
 {% for content in contents %}
 {% if i == 1%}

 <div class="row">
 <div class="col-12 col-md-7">
 <div class="listing__last__article">
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="last__article__image">
 <div class="card-overlay">
 <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 350px; position: relative; background-size:cover;"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="last__article__card">
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="last__article__date">
 {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
 <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
 {# {% endif %} #} {% endfor %} 
 <span class="card-post__date"> - {{ content.publish_date|datetimeformat('%e %B %Y') }}</span>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="last__article__titre">
 <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name }}">{{ content.name }}</a></h3>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="last__article__content">
 <p> {{ content.post_list_content|striptags|truncate(300, breakword=False, end='...') }}</p>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="last__article__cta">
 <a class="link" href="{{ content.absolute_url }}" title="{{ content.name }}">Lire</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="col-0 col-md-1"></div>
 <div class="col-12 col-md-4">
 <div class="row">
 <div class="col-12 col-md-12">
 <h4>Les articles les plus consultés</h4>
 {% set pop_posts = blog_popular_posts('default', 2) %}
 {% for pop_post in pop_posts %}

<!----------------------- section with slider------------------>

 <div class="article__consulte">
 <div class="article__consulte__date">
 {% for tag in pop_post.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
 <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
 {# {% endif %} #} {% endfor %} 
 <span class="card-post__date"> - {{ pop_post.publish_date|datetimeformat('%e %B %Y') }}</span>
 </div>
 <div class="article__consulte__titre">
 <h3><a href="{{ pop_post.absolute_url }}" title="{{ pop_post.name }}">{{ pop_post.name }}</a></h3>
 </div>
 <div class="article__consulte__cta">
 <a class="link" href="{{ pop_post.absolute_url }}" title="{{ pop_post.name }}">Lire</a>
 </div> 
 </div>
<!----------------------- section with slider------------------>

 {% endfor %}
 </div>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-12 col-md-12">
 <div class="all__article__titre">
 <h2>Ces articles peuvent aussi vous intéresser</h2>
 </div>
 </div>
 </div>
 </div>
 <div class="container" style="">
 <div class="row" style="">
 <div class="other__article">
 <div class="col-12 col-md-12">
 <div class="row">
 {% set i = 1 + 1%}
 {% for content in contents %}
 {% if i == 2 %}
 {% else %}
 <div class="col-12 col-md-4" style="display: inline-flex;">
 <div class="card__post">
 <div class="card__overlay">
 <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 240px; position: relative; background-size:cover;">
 </div>
 </div>
 <div class="card-body">
 <div class="date_post">
 {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
 <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
 {# {% endif %} #} {% endfor %}<span class="other__article"> - {{ content.publish_date|datetimeformat('%e %B %Y') }}</span>
 </div>
 <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name }}">{{ content.name }}</a></h3>
 <p class="card-post__desc"> {{ content.post_list_content|striptags|truncate(75, breakword=False, end='...') }}</p>
 <div class="card-post__cta">
 <a class="link" href="{{ content.absolute_url }}" title="{{ content.name }}">Lire</a>
 </div> 
 </div>
 </div>
 </div> 
 {% endif %}
 {% set i = i + 1 %}
 {% if i == 7 %}
 <div class="col-12 col-md-4" style="display: inline-flex;">
 <div class="builder-cta__element">
 <div class="builder-cta__element__container">
 <div class="row justify-content-center">
 <div class="col-12 col-md-12">
 <h3 class="builder-cta__element__container__titre">Vous souhaitez en savoir plus sur les solutions de protection ANOZR WAY ?</h3>
 <div class="builder-cta__element__container__titre__cta">
 <!--HubSpot Call-to-Action Code -->
 <a href="https://calendly.com/anozrway/decouverte" target="_blank" style=" color: #65B7E3; background-color: #fff; border-radius: 30px; text-decoration: none; padding: 10px 20px;">Demandez une démo</a>
 <!-- end HubSpot Call-to-Action Code -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 {% endif %}
 {% endfor %}
 </div>
 {% endif %} 
 {% endfor %}
 </div>
 </div>
 </div>
 </div> 
{% else %} 
 <div class="title__articles">
 <div class="container">
 <div class="row">
 <div class="col-12 col-md-12">
 <h1>{{ topic|replace('-',' ') }}</h1>
 </div>
 </div>
 </div>
 </div>
 <div class="container">
 <div class="row"> 
 {% for content in contents %}
 <div class="col-12 col-md-4" style="display: inline-flex;">
 <div class="tag__article">
 <div class="card__post">
 <div class="card__overlay">
 <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 240px; position: relative; background-size:cover;">
 </div>
 </div>
 <div class="card-body">
 <div class="date_post">
 {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
 <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
 {# {% endif %} #} {% endfor %}<span class="other__article"> - {{ content.publish_date|datetimeformat('%e %B %Y') }}</span>
 </div>
 <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name }}">{{ content.name }}</a></h3>
 <p class="card-post__desc"> {{ content.post_list_content|striptags|truncate(75, breakword=False, end='...') }}</p>
 <div class="card-post__cta">
 <a class="link" href="{{ content.absolute_url }}" title="{{ content.name }}">Lire</a>
 </div> 
 </div>
 </div>
 </div>
 </div>
 {% endfor %}
 </div>
 </div>
 </div>
{% endif %}
 <!-- Pagination -->
 {% if not simple_list_page %}
 <div class="blog__pagination">
 <div class="container">
 <div class="row">
 <div class="col-12 col-md-12">
 {% if last_page_num %}
 <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Précédent</a>
 {% endif %}
 {% if next_page_num %}
 <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Suivant</a>
 {% endif %}
 </div>
 </div>
 </div>
 </div>
 {% endif %}
 <!-- Pagination -->

thanks a lot for your help

2

Hi @designfrance,

yes it’s possible. There are a lot of possible approaches. The easiest might be to get any slider js like splide, swiper, slick-slider and include it into your template like

<section class="splide">
 <div class="splide__track">
		<div class="splide__list">
 {% set pop_posts = blog_popular_posts('default', 2) %}
 {% for pop_post in pop_posts %}
<div class="splide__slide">
<div class="article__consulte"> 
 <div class="article__consulte__date">
 {% for tag in pop_post.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
 <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
 {# {% endif %} #} {% endfor %} 
 <span class="card-post__date"> - {{ pop_post.publish_date|datetimeformat('%e %B %Y') }}</span>
 </div>
 <div class="article__consulte__titre">
 <h3><a href="{{ pop_post.absolute_url }}" title="{{ pop_post.name }}">{{ pop_post.name }}</a></h3>
 </div>
 <div class="article__consulte__cta">
 <a class="link" href="{{ pop_post.absolute_url }}" title="{{ pop_post.name }}">Lire</a>
 </div> 
 </div>
</div>
 {% endfor %}
		</div>
 </div>
</section>

(splide js example)

hope that helps

best,

Anton