CodePen Embed - L'interMEDIAire

<!-- <!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*/

View Compiled

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*/

This Pen is owned by Merlin on CodePen.

See more by @lintermediaire on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript