0

$('.slider').owlCarousel({
  nav: false,
  dots: false,
  loop: true,
  items: 3,
  responsive: {
    0: {
      items: 1,
      stagePadding: 230,
      margin: 10,
    }
  }
})
.slider {
  width: 400px;
  display: flex;
  justify-content: center;
}

.slider_item {
  width: 100px;
  height: 120px;
}

.slider_item {
  background: red;
}

.slider .owl-item.active .slider_item {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="slider owl-carousel">
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
  <div class="slider_item"></div>
</div>

Что я делаю не так? Мне нужно что бы мои элементы были вплотную друг к другу ,а активный элемент должен быть по центру.

1 ответ 1

1

Ваш вариант был не совсем правильным. Вы пытаетесь задать всего один блок на экран, уменьшив этот блок (тем самым подогнав остальные в одну линию). Так можно добиться, что слайды будут в линию, но всегда активный блок будет один слева.

Вариант ниже верен. На экранах меньше 500px Вы получаете только 1 блок на экран (или вообще уберите свойство responsive, если и на мобильной версии нужно выводить по 3 элемента). В ином случае получаем 3 активных блока, определяем центральный блок из этих активных (он получает класс center).

$('.slider').owlCarousel({
  nav: false,
  dots: false,
  loop: true,
  items: 3,
  center:true,
  margin: 0,
  responsive: {
    0: {
      items: 1,
    },
    500: {
      items: 3,
    }
  }
})
.slider {
  width: 400px;
  display: flex;
  justify-content: center;
}

.slider .owl_item {
  width: 33%;
}

.slider_item {
height: 120px;
width: 100%;
}

.slider_item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-family: sans-serif;
}

.slider .owl-item.active .slider_item {
  background: orange;
}

.slider .owl-item.active.center .slider_item {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="slider owl-carousel">
  <div class="slider_item">1</div>
  <div class="slider_item">2</div>
  <div class="slider_item">3</div>
  <div class="slider_item">4</div>
  <div class="slider_item">5</div>
  <div class="slider_item">6</div>
  <div class="slider_item">7</div>
  <div class="slider_item">8</div>
</div>

1
  • спасибо) понял свою ошибку 12 фев 2019 в 9:00

Ваш ответ

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

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