Сложный слайдер slick

267

11 ноября 2017, 14:45

Есть задание сделать слайдер. Вот такого типа.

я хотел использовать для его создания slick slider. но не пойму как вставить заголовок НОЯБРЬ в слайдер. Пока функционал не нужен никакой.

Может кто знает?

$(document).ready(function() { 
 
  $('.preview-slider').slick({ 
    dots: false, 
    arrows: true, 
    prevArrow: '<button type="button" class="slick-btn slick-btn-top"><i class="fa fa-angle-up" aria-hidden="true"></i></button>', 
    nextArrow: '<button type="button" class="slick-btn"><i class="fa fa-angle-down" aria-hidden="true"></i></button>', 
    vertical: true, 
    slidesToShow: 5, 
    slidesToScroll: 2, 
    verticalSwiping: true, 
    infinite: false 
  }); 
 
 
 
});

html { 
  overflow: hidden; 
} 
 
.preview-block { 
  width: 220px; 
  margin-top: -2px; 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
} 
 
.preview-block p { 
  font-size: 12px; 
  line-height: 14px; 
  font-weight: 400; 
  color: #555360; 
  padding: 0; 
  margin: 0; 
} 
 
.date-of-month { 
  min-width: 25px; 
  max-width: 25px; 
  padding: 7px 5px; 
  border-right: 1px solid black; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
.info-date { 
  padding: 7px 8px; 
} 
 
.slick-btn { 
  height: 46px; 
  background-color: #7469b1; 
  width: 220px; 
  font-size: 40px; 
  color: #fff; 
  font-weight: 300; 
} 
 
.slick-btn-top:after { 
  content: ""; 
  display: block; 
  height: 20px; 
  width: 220px; 
  background-color: green; 
  position: relative; 
} 
 
.slick-slide { 
  outline: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>My test</title> 
 
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.css" /> 
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.min.js"></script> 
 
  <link rel="stylesheet" href="slick/slick.css"> 
  <link rel="stylesheet" href="slick/slick-theme.css"> 
  <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
 
 
  <h2>Ноябрь</h2> 
 
  <div class="preview-slider"> 
 
 
    <div data="november"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>1</p> 
        </div> 
        <div class="info-date"> 
          <p>Панельная дискуссия «Особенности заключения государственных контрактов…</p> 
        </div> 
      </div> 
    </div> 
 
    <div data="november"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>2</p> 
        </div> 
        <div class="info-date"> 
          <p>Российский форум по системам искусственного интеллекта – RAIF</p> 
        </div> 
      </div> 
    </div> 
 
 
    <div data="november"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>3</p> 
        </div> 
        <div class="info-date"> 
          <p>Научно-техническая и практическая конференция «Перспективы развития…</p> 
        </div> 
      </div> 
    </div> 
 
 
    <div data="december"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>4</p> 
        </div> 
        <div class="info-date"> 
          <p>Панельная дискуссия «Особенности заключения государственных контрактов…</p> 
        </div> 
      </div> 
    </div> 
 
 
    <div data="december"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>5</p> 
        </div> 
        <div class="info-date"> 
          <p>Российский форум по системам искусственного интеллекта – RAIF</p> 
        </div> 
      </div> 
    </div> 
 
 
    <div data="december"> 
      <div class="preview-block"> 
        <div class="date-of-month"> 
          <p>6</p> 
        </div> 
        <div class="info-date"> 
          <p>Научно-техническая и практическая конференция «Перспективы развития…</p> 
        </div> 
      </div> 
    </div> 
 
  </div> 
 
 
</body> 
<script type='text/javascript' src='jquery.min.js'></script> 
<script type='text/javascript' src='script.js'></script> 
<script type='text/javascript' src='slick/slick.min.js'></script> 
 
</html>