« Apprendre, c’est transformer le doute en outil. »
« Chaque notion maîtrisée est une liberté gagnée. »
« On n’apprend jamais pour savoir, mais pour comprendre. »
« Le code n’est pas écrit, il est sculpté. »
« Un bug bien compris vaut mieux qu’un code ignoré. »
« Coder, c’est penser deux fois : pour la machine et pour soi. »
« Chaque ligne simplifie ou complique le monde. »
« L’organisation, c’est du temps rendu visible. »
« La clarté est une discipline avant d’être un état. »
Slick.js version responsive
Le code Javascript et le markup HTML.
Vous pouvez voir le slider en action sur la page d'accueil. Vous pouvez testez en changeant la taille de votre fenêtre vous remarquerez que les cards vont se redimensionner automatiquement.
Le code Javascript
$(function () {
/// Equalize card heights within a slider
function equalize($slider) {
if (!$slider || !$slider.length) return;
// select only original slides (skip clones)
//const $cards = $slider.find(".slick-slide:not(.slick-cloned) .card, > .card");
const $cards = $slider.find(".slick-slide .card, > .card");
if (!$cards.length) return;
// reset heights first
$cards.parent().css("height", "auto");
// find max height
let max = 0;
$cards.each(function () {
const h = $(this).outerHeight();
if (h > max) max = h;
});
// apply max height to all cards
$cards.parent().css("height", max + "px");
}
// Equalize all sliders on the page
function equalizeAll() {
$(".slicker").each(function () {
equalize($(this));
});
}
// Debounced resize handler
let resizeTimer;
$(window).on("resize orientationchange", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(equalizeAll, 100);
});
// Initialize each slider
$(".slicker").each(function () {
const $slider = $(this);
// Read slides config from data attribute
const slides = $slider.data("slides");
const slideArray = (slides && slides.trim())
? slides.split(',').map(x => parseInt(x.trim(), 10))
: [4, 3, 2, 1];
// Initialize slick
$slider.slick({
slidesToShow: slideArray[0],
slidesToScroll: 1,
infinite: true,
adaptiveHeight: false,
responsive: [
{ breakpoint: 992, settings: { slidesToShow: slideArray[1] } },
{ breakpoint: 768, settings: { slidesToShow: slideArray[2] } },
{ breakpoint: 576, settings: { slidesToShow: slideArray[3] } }
]
});
// Slick events
$slider.on("init reInit setPosition afterChange", function () {
equalize($slider);
});
// Equalize once after initialization
setTimeout(function () { equalize($slider); }, 0);
// Re-equalize when images finish loading
$slider.find("img").each(function () {
if (!this.complete) {
$(this).one("load error", function () { equalize($slider); });
}
});
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: false,
focusOnSelect: true
});
});
Un exemple de markup pour un slider en utilisant des cards
<section class="container my-4">
<h1 class="my-4">Services</h1>
<div id="slicker-3" class="slicker align-items-stretch">
<div class="card h-100">
<div class="card-img">
<img src="images/logo-web.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Umbraco CMS
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>Votre site sur le CMS Umbraco avec des composants et des pages prêtes à l'emploi'</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
<div class="card h-100">
<div class="card-img">
<img src="images/logo-analysis.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Application .NET
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>
Votre application .NET : WinUI, MVC, Blazor.
</br>
Des apps online à des applications desktop, ou du traitement de données
</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
<div class="card h-100">
<div class="card-img">
<img src="images/logo-authoring.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Votre site sur Wix
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>Création et customisation sur un éditeur WEB online</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
<div class="card h-100">
<div class="card-img">
<img src="images/logo-code-review.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Intégration de Snipcart
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>Snipcart est une plateforme pour développer un webshop et l'intégrer à une application existante'</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
<div class="card h-100">
<div class="card-img">
<img src="images/logo-data.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Intégration de Snipcart
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>Snipcart est une plateforme pour développer un webshop et l'intégrer à une application existante'</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
<div class="card h-100">
<div class="card-img">
<img src="images/logo-maintenance.png" class="card-img img-fluid">
</div>
<h4 class="card-header">
Intégration de Snipcart
</h4>
<div class="card-body">
<div class="card-text d-flex justify-content-between align-items-center">
<p>Snipcart est une plateforme pour développer un webshop et l'intégrer à une application existante'</p>
</div>
</div>
<div class="card-footer justify-content-end">
<a href="#" class="home-btn-small btn btn-primary">Détail</a>
</div>
</div>
</div>
</section>Le point clé ici n’est pas seulement le carousel… 👉 c’est surtout la logique d’égalisation des hauteurs via la fonction equalize().
Pourquoi c’est important ? Quand un slider contient des cartes avec :
des textes de longueurs différentes,
des images chargées dynamiquement,
du responsive,
ou des contenus injectés,
les hauteurs deviennent incohérentes.
Résultat :
❌ layout qui saute
❌ sliders irréguliers
❌ expérience visuelle moins propre
La fonction equalize() résout précisément ce problème :
✅ reset des hauteurs
✅ calcul automatique de la plus grande carte
✅ application d’une hauteur uniforme
✅ re-calcul après resize
✅ re-calcul après chargement des images
✅ re-calcul après événements Slick (init, reInit, setPosition, afterChange)
Autres points intéressants de cette implémentation :
🔹 Configuration responsive via data-slides : Permet de contrôler le nombre de slides directement dans le HTML.
🔹 Debounce du resize : Évite de recalculer les hauteurs des dizaines de fois pendant le redimensionnement.
🔹 Gestion des images async ; Très important dans les vrais projets : les hauteurs changent souvent après chargement des images.
🔹 Double slider synchronisé avec .slider-for + .slider-nav via asNavFor.
🔹 Architecture réutilisable : Le code est pensé pour fonctionner automatiquement sur plusieurs sliders .slicker.
👉 En résumé : Ce genre d’implémentation montre qu’un bon carousel ne se limite pas à “faire défiler des slides”. La vraie difficulté est souvent dans la stabilité du layout et l’expérience responsive.