0

$(document).ready(function () {
    $('.slider__slick-items').slick();
});
.slider {
    background: #F5F8FF;
    min-height: 865px;
}

.slider .suptitle {
    text-align: center;
    padding: 104px 0 20px 0;
}

.slider .title {
    font-weight: normal;
    font-size: 36px;
    line-height: 45px;
    text-align: center;
    color: #3D4F9F;
    margin-bottom: 92px;
}

.slider .slider__item {
    display: flex;
    width: 958px !important;
    background: #FFFFFF;
    border: 1px solid #D8E3FE;
    box-shadow: 0px 15px 50px #EFF4FF;
    padding: 70px 41px 64px 35px;
    margin: 0 auto;
    max-height: 394px;
}

.slider .slider__item .item__images {
    position: relative;
    width: 50%;
}

.slider .slider__item .item__content {
    width: 50%;
}

.slider .slider__item .item__content .description {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 27px;
    letter-spacing: 0.03em;
    color: #8D96BD;
    margin-bottom: 71px;
    max-width: 408px;
    text-align: left;
}

.slider .slider__item .item__content .slider-title {
    margin-bottom: 32px;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 45px;
    text-align-last: left;
    color: #3D4F9F;
}

.slider .slider__item .item__content .btn-get {
    margin-right: 44px;
    display: inline-block;
}

.slider .slider__item .item__content .add-btn {
    font-family: Quicksand;
    color: #A6B6DA;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/global.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Quicksand:wght@300;500&family=Roboto:wght@500&display=swap" rel="stylesheet">

</head>

<body>
  <section class="slider">
    <div class="suptitle">OUR RESOURCES</div>
    <div class="title">Start reading our blog</div>
    <div class="slider__slick-items">
      <div class="slider__item">
        <div class="item__images"></div>
        <div class="item__content">
          <div class="slick-title">How to start planning</div>
          <div class="description">
            Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
          </div>
          <a href="#" class="btn-get">Read now</a>
          <a href="#" class="add-btn">Add to your bookmarks</a>
        </div>
      </div>
      <div class="slider__item">
        <div class="item__images"></div>
        <div class="item__content">
          <div class="slick-title">How to start planning</div>
          <div class="description">
            Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
          </div>
          <a href="#" class="btn-get">Read now</a>
          <a href="#" class="add-btn">Add to your bookmarks</a>
        </div>
      </div>
      <div class="slider__item">
        <div class="item__images"></div>
        <div class="item__content">
          <div class="slick-title">How to start planning</div>
          <div class="description">
            Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
          </div>
          <a href="#" class="btn-get">Read now</a>
          <a href="#" class="add-btn">Add to your bookmarks</a>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <script type="text/javascript" src="js/script.min.js"></script>
</body>

</html>

Все слайды перелистываются как один. Заранее спасибо https://glitch.com/edit/#!/join/419b83a8-da81-4aa5-b561-741e33857a5d

2
  • приложите код сюда, чтобы можно бало его запустить, так вы получите ответ быстрее 13 июн 2020 в 5:39
  • Добавил теперь можно посмотреть
    – alex071105
    13 июн 2020 в 21:05

1 ответ 1

1

У Вас в вашем css не было стандартных стилей слайдера с ними вот так

Смотреть на весь экран

$(document).ready(function() {
  $('.slider__slick-items').slick();
});
.slider {
  background: #F5F8FF;
  min-height: 100vh;
  position: relative;
}

.slider .suptitle {
  text-align: center;
  padding: 104px 0 20px 0;
}

.slider .title {
  font-weight: normal;
  font-size: 36px;
  line-height: 45px;
  text-align: center;
  color: #3D4F9F;
  margin-bottom: 92px;
}

.slider .slider__item {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D8E3FE;
  box-shadow: 0px 15px 50px #EFF4FF;
  padding: 70px 41px 64px 35px;
  margin: 0 auto;
  max-height: 394px;
}

.slider .slider__item .item__images {
  position: relative;
  width: 50%;
}

.slider .slider__item .item__content {
  width: 50%;
}

.slider .slider__item .item__content .description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.03em;
  color: #8D96BD;
  margin-bottom: 71px;
  max-width: 408px;
  text-align: left;
}

.slider .slider__item .item__content .slider-title {
  margin-bottom: 32px;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 45px;
  text-align-last: left;
  color: #3D4F9F;
}

.slider .slider__item .item__content .btn-get {
  margin-right: 44px;
  display: inline-block;
}

.slider .slider__item .item__content .add-btn {
  font-family: Quicksand;
  color: #A6B6DA;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  line-height: 16px;
}

.slick-next,
.slick-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.slick-next {
  left: 30px;
}

.slick-prev {
  right: 30px;
}


/* Slider */

.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Quicksand:wght@300;500&family=Roboto:wght@500&display=swap" rel="stylesheet">

<section class="slider">
  <div class="suptitle">OUR RESOURCES</div>
  <div class="title">Start reading our blog</div>
  <div class="slider__slick-items">
    <div class="slider__item">
      <div class="item__images"></div>
      <div class="item__content">
        <div class="slick-title">How to start planning</div>
        <div class="description">
          Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
        </div>
        <a href="#" class="btn-get">Read now</a>
        <a href="#" class="add-btn">Add to your bookmarks</a>
      </div>
    </div>
    <div class="slider__item">
      <div class="item__images"></div>
      <div class="item__content">
        <div class="slick-title">How to start planning</div>
        <div class="description">
          Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
        </div>
        <a href="#" class="btn-get">Read now</a>
        <a href="#" class="add-btn">Add to your bookmarks</a>
      </div>
    </div>
    <div class="slider__item">
      <div class="item__images"></div>
      <div class="item__content">
        <div class="slick-title">How to start planning</div>
        <div class="description">
          Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
        </div>
        <a href="#" class="btn-get">Read now</a>
        <a href="#" class="add-btn">Add to your bookmarks</a>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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