<!-- <!DOCTYPE html> -->
<html lang="fr-BE">
<head>
<meta charset="UTF-8">
<title>L'interMEDIAire - Slick slider</title>
<meta name="viewport" content="width=device-width, initial-scale=0.9,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="L'interMEDIAire - Slick slider">
<meta name="robots" content="noindex">
<meta name="author" content="L'intermediaire">
<!--fonte icone-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
<body>
<div id="contenu">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<main>
<h1>L'interMEDIAire</h1>
<h2>Slick slider</h2>
<menu class="races">
<a class="races_actifs" data-race="1" title="1"><span>1</span></a>
<a data-race="2" title="2"><span>2</span></a>
<a data-race="3" title="3"><span>3</span></a>
<a data-race="4" title="4"><span>4</span></a>
<a data-race="5" title="5"><span>5</span></a>
<a data-race="6" title="6"><span>6</span></a>
<a data-race="7" title="7"><span>7</span></a>
<a data-race="8" title="8"><span>8</span></a>
</menu>
<section class="slide">
<i class="fa fa-angle-left"></i>
<div class="chats">
<div id="1" data-race-chat="1" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/301" alt="titre chat" title="titre chat">
</div>
<h3>Chat 1</h3>
</div>
<div id="2" data-race-chat="2" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/302" alt="titre chat" title="titre chat">
</div>
<h3>Chat 2</h3>
</div>
<div id="3" data-race-chat="3" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/303" alt="titre chat" title="titre chat">
</div>
<h3>Chat 3</h3>
</div>
<div id="3" data-race-chat="3" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/303" alt="titre chat" title="titre chat">
</div>
<h3>ReChat 3</h3>
</div>
<div id="3" data-race-chat="3" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/303" alt="titre chat" title="titre chat">
</div>
<h3>Et un Chat 3 de plus</h3>
</div>
<div id="3" data-race-chat="3" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/303" alt="titre chat" title="titre chat">
</div>
<h3>Chat 3</h3>
</div>
<div id="4" data-race-chat="4" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/304" alt="titre chat" title="titre chat">
</div>
<h3>Chat 4</h3>
</div>
<div id="5" data-race-chat="5" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/305" alt="titre chat" title="titre chat">
</div>
<h3>Chat 5</h3>
</div>
<div id="6" data-race-chat="6" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/306" alt="titre chat" title="titre chat">
</div>
<h3>Chat 6</h3>
</div>
<div id="7" data-race-chat="7" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/307" alt="titre chat" title="titre chat">
</div>
<h3>Encore Chat 7</h3>
</div>
<div id="7" data-race-chat="7" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/307" alt="titre chat" title="titre chat">
</div>
<h3>Dernier Chat 7</h3>
</div>
<div id="7" data-race-chat="7" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/307" alt="titre chat" title="titre chat">
</div>
<h3>Chat 7</h3>
</div>
<div id="8" data-race-chat="8" class="kat">
<div class="img">
<img src="http://placekitten.com/g/200/308" alt="titre chat" title="titre chat">
</div>
<h3>Chat 8</h3>
</div>
</div>
<i class="fa fa-angle-right"></i>
</section>
</main>
</div>
</body>
</html>$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$noiropaque: rgba(29,31,32,.9);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
$gris: rgba(55,55,55,1);
$gris2: rgba(255,255,255,.8);
$gris_clair: rgba(204,204,204,1);
$padding: 20px 10px;
$transition: all .7s ease;
@mixin flex($direction,$espace,$alignement,$alignement_contenu) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: $direction;
flex-direction: $direction;
-webkit-box-pack: $espace;
-ms-flex-pack: $espace;
justify-content: $espace;
-webkit-box-align: $alignement;
-ms-flex-align: $alignement;
align-items: $alignement;
-ms-flex-line-pack: $alignement_contenu;
align-content: $alignement_contenu;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
*,
*:after,
*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0px auto;
padding: $padding;
width: 640px;
background: $noir;
color: $blanc;
font-size: 1em;
}
#contenu {
padding: 0px;
}
main {
padding: $padding;
background: $noirfonce;
}
a {
color: $bleu;
font-size: .9em;
font-weight: 700;
text-decoration: none;
transition: $transition;
&:hover,
&:active {
color: $bleu;
}
}
h1 {
margin: 0;
padding: 0;
font-size: 1.4em;
color: $rose;
}
h2 {
margin: 15px 12px;
width: 100%;
color: $bleu;
font-size: 2.2em;
font-weight: 700;
}
h3 {
margin: 10px 0px;
color: $blanc;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
}
h1,h2,h3 {
font-family: 'Inconsolata', monospace;
}
i {
cursor: pointer;
}
/*MENU*/
.races {
padding: 12px;
a {
display: block;
margin-right: 20px;
border-bottom: 5px solid $gris_clair;
line-height: 150%;
outline: none;
&.races_actifs,
&:hover,
&:active {
color: $bleu;
border-bottom: 5px solid $bleu;
cursor: pointer
}
}
}
/*chats*/
.slide {
position: relative;
width: 100%;
>i {
z-index: 10001;
position: absolute;
display: block;
top: 18%;
width: 23px;
height: 43px;
background: $gris;
color: $blanc;
font-size: 1.6em;
text-align: center;
line-height: 43px;
&.fa-angle-right {
left: calc(100% - 23px);
}
}
.kat {
position: relative;
padding: 0px 30px;
outline: none;
.img {
margin-top: 7px;
width: 100%;
height: 140px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
img {
display: none;
}
}
i {
font-size: 1.4em;
font-weight: 900;
}
}
}
@media screen and (min-width: 520px) {
.slide {
>i {
width: 30px;
height: 60px;
line-height: 60px;
font-size: 2.7em;
&.fa-angle-right {
left: calc(100% - 30px);
}
}
.kat {
padding: 0px 20px;
h3 {
margin-bottom: 6px;
font-size: 1.1em;
}
.img {
width: 250px;
min-height: 120px;
}
}
}
}
@media screen and (min-width: 1280px) {
#contenu {
margin: 0px auto;
width: 768px;
}
}
/*www.lintermediaire.be*/jQuery(document).ready(function($) {
/*img sur chaque div*/
$('.chats .img').each(function(index,element) {
var $image_slide = $(this).children().attr('src');
$(this).css({
"background-image": "url('"+$image_slide+"')",
});
});
/*SLICK*/
$('.races').slick({
autoplay:false,
infinite: true,
autoplaySpeed: 7000,
arrows: false,
dots: false,
pauseOnHover:false,
slidesToShow: 12,
slidesToScroll: 1,
responsive: [
{
breakpoint: 980,
settings: {
arrows: false,
slidesToShow: 6,
slidesToScroll: 1
}
},
{
breakpoint: 420,
settings: {
arrows: false,
slidesToShow: 4,
slidesToScroll: 1
}
}
]
});
$('.chats').slick({
autoplay:false,
autoplaySpeed: 7000,
dots:false,
pauseOnHover:false,
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
prevArrow: '.fa-angle-left',
nextArrow: '.fa-angle-right',
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 360,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}).on('afterChange', function(event, slick, currentSlide) {
var chat_active = $(slick.$slides[currentSlide]).data('race-chat');
var race_actif = $('.races a[data-race="'+chat_active+'"]');
var index_race_actif = '';
race_actif.each(function(index,element) {
var current_index = $(element).closest('.slick-slide').attr('data-slick-index');
if(current_index>=0 && index_race_actif ==''){
index_race_actif = $(element);
}
});
var nombre_race_actif = race_actif.length;
if(nombre_race_actif>0){
$('.races a').removeClass('races_actifs');
index_race_actif.addClass('races_actifs');
var index_race_actif = index_race_actif.closest('.slick-slide').attr('data-slick-index');
$('.races').slick('slickGoTo', index_race_actif);
}
});
$('.races a').on('click', function(e) {
e.preventDefault();
$('.races a').removeClass('races_actifs');
$(this).addClass('races_actifs');
var index_lien_race = $(this).closest('.slick-slide').attr('data-slick-index');
$('.races').slick('slickGoTo', index_lien_race);
var race_clique = $(this).data('race');
var premier_voiture_race = $('.chats [data-race-chat="'+race_clique+'"]');
var index_premier_voiture_race = premier_voiture_race.closest('.slick-slide').not('.slick-cloned').attr('data-slick-index');
$('.chats').slick('slickGoTo', index_premier_voiture_race);
});
});
/*RéaLIsé par lintermediaire.be*/
External CSS
This Pen doesn't use any external CSS resources.