add an article slider in the blog listing

designfrance — Thu, 29 Feb 2024 13:38:48 GMT

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 %}  <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>  {% 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">  <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>  </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 %}  {% 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 %}

thanks a lot for your help

Re: add an article slider in the blog listing

Anton — Fri, 01 Mar 2024 18:33:36 GMT

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

topic add an article slider in the blog listing in CMS Development

add an article slider in the blog listing

Re: add an article slider in the blog listing