1

Помогите поправить счетчик в slick slider. Слайдер должен листать по три картинки за раз при этом на счетчике должно быть +1, а не +3 как сейчас. И никак не могу сделать, чтобы число, которое увеличивается делало это через JS (сейчас прописано в HTML)

$(document).ready(function() {
  $('.slider-new').slick({
    arrows: true,
    nextArrow: $('.next'),
    prevArrow: $('.prev'),
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
$(".slider-new").on('afterChange', function(event, slick, currentSlide) {
  if (currentSlide == 0) {
    $("#count").text("0" + (currentSlide + 1));
  } else {
    $("#count").text("0" + (currentSlide + 1));
  }

});

$(document).ready(function() {
  $('.slider-birthday').slick({
    arrows: true,
    nextArrow: $('.next2'),
    prevArrow: $('.prev2'),
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
$(".slider-birthday").on('afterChange', function(event, slick, currentSlide) {
  if (currentSlide == 0) {
    $("#count2").text("0" + (currentSlide + 1));
  } else {
    $("#count2").text("0" + (currentSlide + 1));
  }

});
.main__section--slider {
  margin: 20px 0px 0px 10px;
  background: #f8f8f8;
  padding: 0px 0px 20px 0px;
}

.owl-item {
  width: 10%;
}

.main__section--collegues,
.main__section--birthday {
  width: 49%;
  float: left;
  margin: 2em 0px 1.1em;
  position: relative;
}

.main__section--birthday {
  border-left: 1px solid grey;
}

.collegues__list,
.collegues__birthday {
  padding: 0;
  display: flex;
}

.collegues__list-el {
  list-style: none;
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.collegues__title {
  text-align: center;
  padding-bottom: 15px;
  margin-top: 0px;
}

.collegues__firstname,
.collegues__surname {
  margin: 0px;
}

.collegues__name {
  font: bold 14px/1.1 'Stolzl', sans-serif;
  text-align: center;
}

.collegues__name-link {
  text-decoration: none;
  color: #000;
}

.collegues__name-link:active {
  color: #000;
}

.collegues__position {
  padding: 10px 0;
}

.collegues__date,
.collegues__position {
  font: normal 14px/1.1 'Stolzl', sans-serif;
  color: grey;
}

.collegues__birthday>.owl-nav:hover {
  color: #00a85d;
}

.collegues__block--image {}

.collegues__image {
  width: 50px;
  height: 50px;
  margin: 10px auto;
  border-radius: 50%;
}


/*---------------------
---------CLEARFIX------
----------------------*/

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/*----------------------
---------ARROW----------
-----------------------*/

.owl-next:hover,
.owl-prev:hover {
  border-color: #00a85d;
}

.slider__next,
.slider__prev {
  width: 3em;
  height: 2px;
  background: grey;
  border: none;
  position: absolute;
  top: 50%;
}

.slider__prev {
  right: 50%;
}

.slider__next {
  left: 50%;
}

.navigation__btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid grey;
  margin: 0px 3.5em 0px 3.5em;
  cursor: pointer;
}

.navigation__btn:hover {
  border-color: #00a85d;
}

.slider__prev::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.8em;
  top: -.1em;
  border-color: grey;
}

.slider__next::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.8em;
  top: -.1em;
  border-color: grey;
}

.birthday__count,
.collegues__count {
  position: absolute;
  top: 342px;
  display: flex;
  left: 50%;
  /* width: 50px;
  font-size: 12px;
  transform: translateX(-50%);*/
}


/*---------------------
---------SLICK---------
----------------------*/

.slide {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.slider-wrapper,
.slider-wrapper2 {
  margin: 10px auto;
  text-align: center;
}

.slick-prev {
  position: absolute;
  top: 21em;
  left: 60%;
}

.slick-next {
  position: absolute;
  top: 21em;
  left: 30%;
}

.slide-count {
  width: 60px;
  margin: 20px auto 0px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.section__video {
  border-bottom: 2px solid lightgrey;
  min-height: 450px;
  margin: 5px 20px 0px 0px;
}

.slider-count {
  position: relative;
  transform: translateY(50%);
}

.slider {
  width: 1080px;
  margin: 20px;
}

.next,
.prev {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next2,
.prev2 {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next3,
.prev3 {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next,
.next2 {
  left: 62%;
  background: #f8f8f8;
}

.prev,
.prev2 {
  left: 30%;
  background: #f8f8f8;
}

.prev3 {
  left: 40%;
}

.next3 {
  left: 57%;
}

.slide-size {
  margin: 5px;
  flex-basis: 0;
  flex-grow: 1;
  float: left;
  width: 200px;
  height: 200px;
}

.button__line {
  width: 40px;
  height: 1px;
  background: black;
  display: block;
  position: absolute;
  top: 15px;
}

.button__line-right {
  right: 50%;
}

.button__line-left::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.3em;
  top: -2px;
  border-color: black;
}

.button__line-left {
  left: 50%;
}

.button__line-right::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.3em;
  top: -2px;
  border-color: black;
}

.next:hover,
.prev:hover,
.next2:hover,
.prev2:hover,
.next3:hover,
.prev3:hover {
  border: #00a85d 1px solid;
}

.button__line:hover {
  background-color: #00a85d;
}

.count-color {
  color: #00a85d;
}

.next3 .button__line-right::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.3em;
  top: -2px;
  border-color: black;
}

.prev3 .button__line-left::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.3em;
  top: -2px;
  border-color: black;
}


/*---------------------
---------CLOCK---------
----------------------*/

.section__timeblock {
  position: relative;
  margin: 35px 0px 80px 10px;
}

.timeblock__count {
  position: absolute;
  top: 372px;
  left: 50%;
  display: flex;
  font-size: 12px;
  transform: translateX(-50%);
}

.timeblock__header {
  text-align: left;
  margin: 40px 0 30px;
}

.timeblock__title {
  font-weight: 400;
  font-family: 'Stolzl', sans-serif;
}

.timeblock {
  display: inline-flex;
  flex-wrap: nowrap;
}

.timeblock__list {
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-left: -30px;
}

.timeblock__text {
  margin: 0;
}

.timeblock__elem {
  padding: 5px;
}

.clock__timeblock {
  display: flex;
}

.block__timeblock {
  display: flex;
  flex-direction: column;
  flex-basis: 33%;
}

.timeblock-wrapper {
  display: flex;
}

.time {
  font-weight: bold;
}

#clock,
#clock2,
#clock3,
#clock4 {
  display: flex;
}

.prev4,
.next4 {
  width: 19px;
  height: 19px;
  position: absolute;
  left: 300px;
}

.prev4__arrow .next4__arrow {
  width: 19px;
  height: 19px;
  position: absolute;
  left: 300px;
}

.next4 {
  bottom: 25px;
}

.next4__arrow {
  transform: rotate(180deg);
}

.slick-slide {
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>

<div class="main__section--slider clearfix">

  <section class="main__section--collegues">
    <h2 class="collegues__title">Новые сотрудники</h2>

    <div class="collegues__list slider-new">

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Константин</p>
                <p class="collegues__surname">Константинопольский</p>
              </a>
            </div>
            <div class="collegues__position">Финансовый аналитик</div>
            <div class="collegues__date">с <time>14.07.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Василиса</p>
                <p class="collegues__surname">Рождественская</p>
              </a>
            </div>
            <div class="collegues__position">Бухгалтер</div>
            <div class="collegues__date">с <time>29.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Вешняков</p>
              </a>
            </div>
            <div class="collegues__position">Водитель</div>
            <div class="collegues__date">с <time>25.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

    </div>
    <div class="slider-count">
      <div class="slide-count"><span id="count">01</span>/<span class="count-color">04</span></div>
      <div class="next"><span class="button__line button__line-right"></span></div>
      <div class="prev"><span class="button__line button__line-left"></span></div>
    </div>
  </section>

  <section class="main__section--birthday">
    <h2 class="collegues__title">С днем рождения!</h2>

    <div class="collegues__birthday slider-birthday">

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Громов</p>
              </a>
            </div>
            <div class="collegues__position">Водитель</div>
            <div class="collegues__date">5 июля</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Михаил</p>
                <p class="collegues__surname">Решетников
                </p>
              </a>
            </div>
            <div class="collegues__position">Главный бухгалтер</div>
            <div class="collegues__date">29 июня</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Анна</p>
                <p class="collegues__surname">Кочергина</p>
              </a>
            </div>
            <div class="collegues__position">Бухгалтер</div>
            <div class="collegues__date">5 июля</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Анастасия</p>
                <p class="collegues__surname">Мишина</p>
              </a>
            </div>
            <div class="collegues__position">Разработчик</div>
            <div class="collegues__date">6 июля</div>
          </div>
        </div>
      </div>

    </div>

    <div class="slider-count">
      <div class="slide-count"><span id="count2">01</span>/<span class="count-color">02</span></div>
      <div class="next2"><span class="button__line button__line-right"></span></div>
      <div class="prev2"><span class="button__line button__line-left"></span></div>
    </div>
  </section>
</div>

5
  • Я сейчас не понял, на каком счетчике показывает не то значение? На 1 счетчике строго +1 22 окт 2018 в 21:57
  • Да, прописано +1, но происходит +3. Вместо 02/02 > 04/02 23 окт 2018 в 8:05
  • Вы что-то поправили? Потому что сейчас при клике происходит +1 и сдвигается карусель на 1.
    – Lukas
    23 окт 2018 в 8:41
  • @Lukas вот и я об этом говорю, что тут все работает правильно! 23 окт 2018 в 8:56
  • @Lukas случайно в slidesToScroll: 3 указала 1 вместо 3. По идее теперь будет эта ошибка. Нужно чтобы он листал по 3, а прибавлял 1 23 окт 2018 в 11:36

1 ответ 1

0

$(document).ready(function() {
  $('.slider-new').slick({
    arrows: true,
    nextArrow: $('.next'),
    prevArrow: $('.prev'),
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

$(".next").on('click', function() {
 let count =  +$("#countEmpl").text();
 let countMax = +$('#countEmplColor').text();
  if (count < countMax){
 $("#countEmpl").text("0" + (count + 1));
    }
});
$(".prev").on('click', function() {
 let count =  +$("#countEmpl").text();
  if (count != 1 ){
 $("#countEmpl").text("0" + (count - 1));
    }
});
 

$(document).ready(function() {
  $('.slider-birthday').slick({
    arrows: true,
    nextArrow: $('.next2'),
    prevArrow: $('.prev2'),
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
$(".slider-birthday").on('afterChange', function(event, slick, currentSlide) {
  if (currentSlide == 0) {
    $("#count2").text("0" + (currentSlide + 1));
  } else {
    $("#count2").text("0" + (currentSlide + 1));
  }

});
.main__section--slider {
  margin: 20px 0px 0px 10px;
  background: #f8f8f8;
  padding: 0px 0px 20px 0px;
}

.owl-item {
  width: 10%;
}

.main__section--collegues,
.main__section--birthday {
  width: 49%;
  float: left;
  margin: 2em 0px 1.1em;
  position: relative;
}

.main__section--birthday {
  border-left: 1px solid grey;
}

.collegues__list,
.collegues__birthday {
  padding: 0;
  display: flex;
}

.collegues__list-el {
  list-style: none;
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.collegues__title {
  text-align: center;
  padding-bottom: 15px;
  margin-top: 0px;
}

.collegues__firstname,
.collegues__surname {
  margin: 0px;
}

.collegues__name {
  font: bold 14px/1.1 'Stolzl', sans-serif;
  text-align: center;
}

.collegues__name-link {
  text-decoration: none;
  color: #000;
}

.collegues__name-link:active {
  color: #000;
}

.collegues__position {
  padding: 10px 0;
}

.collegues__date,
.collegues__position {
  font: normal 14px/1.1 'Stolzl', sans-serif;
  color: grey;
}

.collegues__birthday>.owl-nav:hover {
  color: #00a85d;
}

.collegues__block--image {}

.collegues__image {
  width: 50px;
  height: 50px;
  margin: 10px auto;
  border-radius: 50%;
}


/*---------------------
---------CLEARFIX------
----------------------*/

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/*----------------------
---------ARROW----------
-----------------------*/

.owl-next:hover,
.owl-prev:hover {
  border-color: #00a85d;
}

.slider__next,
.slider__prev {
  width: 3em;
  height: 2px;
  background: grey;
  border: none;
  position: absolute;
  top: 50%;
}

.slider__prev {
  right: 50%;
}

.slider__next {
  left: 50%;
}

.navigation__btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid grey;
  margin: 0px 3.5em 0px 3.5em;
  cursor: pointer;
}

.navigation__btn:hover {
  border-color: #00a85d;
}

.slider__prev::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.8em;
  top: -.1em;
  border-color: grey;
}

.slider__next::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.8em;
  top: -.1em;
  border-color: grey;
}

.birthday__count,
.collegues__count {
  position: absolute;
  top: 342px;
  display: flex;
  left: 50%;
  /* width: 50px;
  font-size: 12px;
  transform: translateX(-50%);*/
}


/*---------------------
---------SLICK---------
----------------------*/

.slide {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.slider-wrapper,
.slider-wrapper2 {
  margin: 10px auto;
  text-align: center;
}

.slick-prev {
  position: absolute;
  top: 21em;
  left: 60%;
}

.slick-next {
  position: absolute;
  top: 21em;
  left: 30%;
}

.slide-count {
  width: 60px;
  margin: 20px auto 0px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.section__video {
  border-bottom: 2px solid lightgrey;
  min-height: 450px;
  margin: 5px 20px 0px 0px;
}

.slider-count {
  position: relative;
  transform: translateY(50%);
}

.slider {
  width: 1080px;
  margin: 20px;
}

.next,
.prev {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next2,
.prev2 {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next3,
.prev3 {
  width: 30px;
  height: 30px;
  border: 1px solid lightgrey;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -10px;
  margin: 0px 0px 10px;
  cursor: pointer;
}

.next,
.next2 {
  left: 62%;
  background: #f8f8f8;
}

.prev,
.prev2 {
  left: 30%;
  background: #f8f8f8;
}

.prev3 {
  left: 40%;
}

.next3 {
  left: 57%;
}

.slide-size {
  margin: 5px;
  flex-basis: 0;
  flex-grow: 1;
  float: left;
  width: 200px;
  height: 200px;
}

.button__line {
  width: 40px;
  height: 1px;
  background: black;
  display: block;
  position: absolute;
  top: 15px;
}

.button__line-right {
  right: 50%;
}

.button__line-left::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.3em;
  top: -2px;
  border-color: black;
}

.button__line-left {
  left: 50%;
}

.button__line-right::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.3em;
  top: -2px;
  border-color: black;
}

.next:hover,
.prev:hover,
.next2:hover,
.prev2:hover,
.next3:hover,
.prev3:hover {
  border: #00a85d 1px solid;
}

.button__line:hover {
  background-color: #00a85d;
}

.count-color {
  color: #00a85d;
}

.next3 .button__line-right::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(135deg);
  left: 2.3em;
  top: -2px;
  border-color: black;
}

.prev3 .button__line-left::after {
  content: "";
  border-top: 1px solid black;
  border-left: 1px solid black;
  width: 5px;
  height: 5px;
  position: absolute;
  transform: rotate(-45deg);
  right: 2.3em;
  top: -2px;
  border-color: black;
}


/*---------------------
---------CLOCK---------
----------------------*/

.section__timeblock {
  position: relative;
  margin: 35px 0px 80px 10px;
}

.timeblock__count {
  position: absolute;
  top: 372px;
  left: 50%;
  display: flex;
  font-size: 12px;
  transform: translateX(-50%);
}

.timeblock__header {
  text-align: left;
  margin: 40px 0 30px;
}

.timeblock__title {
  font-weight: 400;
  font-family: 'Stolzl', sans-serif;
}

.timeblock {
  display: inline-flex;
  flex-wrap: nowrap;
}

.timeblock__list {
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-left: -30px;
}

.timeblock__text {
  margin: 0;
}

.timeblock__elem {
  padding: 5px;
}

.clock__timeblock {
  display: flex;
}

.block__timeblock {
  display: flex;
  flex-direction: column;
  flex-basis: 33%;
}

.timeblock-wrapper {
  display: flex;
}

.time {
  font-weight: bold;
}

#clock,
#clock2,
#clock3,
#clock4 {
  display: flex;
}

.prev4,
.next4 {
  width: 19px;
  height: 19px;
  position: absolute;
  left: 300px;
}

.prev4__arrow .next4__arrow {
  width: 19px;
  height: 19px;
  position: absolute;
  left: 300px;
}

.next4 {
  bottom: 25px;
}

.next4__arrow {
  transform: rotate(180deg);
}

.slick-slide {
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>


<div class="main__section--slider clearfix">

  <section class="main__section--collegues">
    <h2 class="collegues__title">Новые сотрудники</h2>

    <div class="collegues__list slider-new">

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Константин</p>
                <p class="collegues__surname">Константинопольский</p>
              </a>
            </div>
            <div class="collegues__position">Финансовый аналитик</div>
            <div class="collegues__date">с <time>14.07.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Василиса</p>
                <p class="collegues__surname">Рождественская</p>
              </a>
            </div>
            <div class="collegues__position">Бухгалтер</div>
            <div class="collegues__date">с <time>29.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Вешняков</p>
              </a>
            </div>
            <div class="collegues__position">Водитель</div>
            <div class="collegues__date">с <time>25.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Тан</p>
              </a>
            </div>
            <div class="collegues__position">Секретарь</div>
            <div class="collegues__date">с <time>30.06.2018</time></div>
          </div>
        </div>
      </div>

    </div>
    <div class="slider-count">
      <div class="slide-count"><span id="countEmpl">01</span>/<span id="countEmplColor" class="count-color">04</span></div>
      <div class="next"><span class="button__line button__line-right"></span></div>
      <div class="prev"><span class="button__line button__line-left"></span></div>
    </div>
  </section>

  <section class="main__section--birthday">
    <h2 class="collegues__title">С днем рождения!</h2>

    <div class="collegues__birthday slider-birthday">

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Александр</p>
                <p class="collegues__surname">Громов</p>
              </a>
            </div>
            <div class="collegues__position">Водитель</div>
            <div class="collegues__date">5 июля</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/male.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Михаил</p>
                <p class="collegues__surname">Решетников
                </p>
              </a>
            </div>
            <div class="collegues__position">Главный бухгалтер</div>
            <div class="collegues__date">29 июня</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Анна</p>
                <p class="collegues__surname">Кочергина</p>
              </a>
            </div>
            <div class="collegues__position">Бухгалтер</div>
            <div class="collegues__date">5 июля</div>
          </div>
        </div>
      </div>

      <div class="collegues__list-el">
        <div class="person__block">
          <div class="collegues__block--image">
            <img src="img/female.png" class="collegues__image">
          </div>

          <div>
            <div class="collegues__name">
              <a href="javascript:void(0);" target="_self" class="collegues__name-link">
                <p class="collegues__firstname">Анастасия</p>
                <p class="collegues__surname">Мишина</p>
              </a>
            </div>
            <div class="collegues__position">Разработчик</div>
            <div class="collegues__date">6 июля</div>
          </div>
        </div>
      </div>

    </div>

    <div class="slider-count">
      <div class="slide-count"><span id="count2">01</span>/<span class="count-color">02</span></div>
      <div class="next2"><span class="button__line button__line-right"></span></div>
      <div class="prev2"><span class="button__line button__line-left"></span></div>
    </div>
  </section>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.