<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Scrolling Bootstrap Card Carousel</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container-fluid">
<p><strong> Vous voulez vous amuser en transmettant les valeurs du judaisme ?</strong></p>
<p><strong> Les Editions Ahdout sont désormais présentes en France, en Israel, en Angleterre, aux Etats-Unis, et au Canada .</strong></p>
<p><strong> Conçus en Français et en Anglais, autorisés le Chabbat, ces jeux vous permettrons
de vous retrouver en famille ou entre amis.</strong></p>
<p><strong> 3 jeux sont aujourdhui à votre disposition :</strong></p>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<div class="carousel-item col-md-4 active">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/bKctgz5/Who-s-the-best.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title text-center">Who's the best ?</h4>
<p class="card-text">1500 questions/réponses pour jouer en famille ou entre amis.
Cinq catégories de questions (adaptées à toutes les tranches d’âge) aussi
enrichissantes qu’amusantes : histoire géographique, culture générale, houmach,
dinim, histoire juive.</p>
<a class="btn btn-primary btn1" href='whosTheBest.html'>En savoir plus</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/5K2DRqy/We-are-family.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">We are family</h4>
<p class="card-text">Jeu de 7 familles, dont le but est de parcourir le monde en
découvrant les faits marquants de chacune des 7 communautés de ce jeu mêlant humour,
mémoire et observation.</p>
<a class="btn btn-primary btn2" href='weAreFamily.html'>En savoir plus</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/Sfp0DmP/shkoon.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Shkoon ?</h4>
<p class="card-text">Jeu de déduction où chaque joueur, dispose d’un plateau aimanté
sur lequel sont représentés les portraits de 28 personnalités ayant marqué
leur domaine.</p>
<a class="btn btn-primary btn2" href='shkoon.html'>En savoir plus</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/bKctgz5/Who-s-the-best.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Who's the best ?</h4>
<p class="card-text">1500 questions/réponses pour jouer en famille ou entre amis.
Cinq catégories de questions (adaptées à toutes les tranches d’âge) aussi
enrichissantes qu’amusantes : histoire géographique, culture générale, houmach,
dinim, histoire juive.</p>
<a class="btn btn-primary btn1" href='whosTheBest.html'>En savoir plus</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/5K2DRqy/We-are-family.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">We are family</h4>
<p class="card-text">Jeu de 7 familles, dont le but est de parcourir le monde en
découvrant les faits marquants de chacune des 7 communautés de ce jeu mêlant humour,
mémoire et observation.</p>
<a class="btn btn-primary btn2" href='weAreFamily.html'>En savoir plus</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://i.ibb.co/Sfp0DmP/shkoon.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Shkoon ?</h4>
<p class="card-text">Jeu de déduction où chaque joueur, dispose d’un plateau aimanté
sur lequel sont représentés les portraits de 28 personnalités ayant marqué
leur domaine.</p>
<a class="btn btn-primary btn2" href='shkoon.html'>En savoir plus</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script><script src="./script.js"></script>
</body>
</html>
@media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
$(document).ready(function() {
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $(".carousel-item").length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$(".carousel-item")
.eq(i)
.appendTo(".carousel-inner");
} else {
$(".carousel-item")
.eq(0)
.appendTo($(this).find(".carousel-inner"));
}
}
}
});
});