Bonjour,

Pour un blog, j'ai des articles qui s'affichent comme ceci =

Je ne sais pas du tout comment m'y prendre, pour avoir une loop, et afficher l'article actif au centre et le 2e et 3e sur le côté.

J'ai voulu tester d'utiliser une librairie comme slick ou owl-carousel, mais je ne pense pas que ce soit la bonne solution ?

Ce que je fais

Pour le moment ma structure HTML est comme ceci :

<div class="post post-left">
                    <div class="thumb-post">
                        <img src="img/post.png" alt="post 2">
                    </div>
                    <div class="text-post">
                        <h2>Deuxième article</h2>
                    </div>
                </div>

                <div class="post">
                    <div class="thumb-post">
                        <img src="img/post.png" alt="post 1">
                    </div>
                    <div class="text-post">
                        <h2>Premier article</h2>
                    </div>
                </div>

                <div class="post post-right">
                    <div class="thumb-post">
                        <img src="img/post.png" alt="Post 3">
                    </div>
                    <div class="text-post">
                        <h2>Troisième article</h2>
                    </div>
                </div>
.post-left{
  left: -15%!important;
  opacity:0.3;
  .text-post{
    visibility: hidden;
  }
}
.post-right{
  right: -15%!important;
  left:auto!important;
  opacity:0.3;
  .text-post{
    visibility: hidden;
  }
}
.slider{
  display: flex;
  align-items:center;
}

Aucune réponse