Owl carousel responsive: javascript — Сделать owl slider carousel адаптивным под сетку bootstrap

javascript — Почему Owl carousel выбирает активным элемент слева, а не по центру?

Вопрос задан 4 года 4 месяца назад

Изменён 4 года 4 месяца назад

Просмотрен 449 раз

$('.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>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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

• javascript
• html
• css
• owl-carousel

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

Вариант ниже верен. На экранах меньше 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>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</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.

html — Как сделать карусель совы более гибкой?

спросил 1 год, 4 месяца назад

Изменено 1 год, 4 месяца назад

Просмотрено 2к раз

Я пытаюсь разместить четыре элемента на среднем экране и два на мобильном устройстве. Я сделал все, от настройки ширины и высоты до присвоения каждому элементу собственного столбца, удаления основного столбца и замены его индивидуально для каждого столбца, поэтому технически я сделал col-6 col-md-3 col-lg-3. Это оказалось не так хорошо, поэтому я ищу помощи.

 $('.партнеры-рестораны').owlCarousel({
    петля: правда,
    поле: 10,
    автозапуск: ложь,
    отвечает: {
      0:{
        предметы:2
      },
      600:{
        предметы:3
      },
      1000:{
        предметы:5
      }
    }
  }) 

 . сова-карусель{
    курсор: указатель;
  }
  .owl-carousel .owl-nav{
    переполнение: скрыто;
    высота: 0px;
  }
  .owl-theme .owl-dots .owl-dot.active span,
  .owl-theme .owl-dots .owl-dot: hover span {
      фон: #ff7b5f;
  }
  .owl-carousel .item {
      выравнивание текста: по центру;
      отступ: 40px;
  }
  .owl-carousel .nav-btn{
      высота: 40 пикселей;
      положение: абсолютное;
      ширина: 40 пикселей;
      курсор: указатель;
      верх: 105px !важно;
  }
  .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    события-указатели: нет;
    непрозрачность: 0,2;
  }
  .owl-carousel .prev-slide{
      background: url(../images/left-arrow-btn.png) без повтора прокрутки 0 0;
      слева: -40px;
  }
  .сова-карусель .следующий слайд{
      background: url(../images/right-arrow-btn.png) без повтора прокрутки 0 0;
      справа: -40px;
  }
  .owl-carousel .prev-slide:hover{
    background: url(../images/left-arrow-hover.png) без повтора прокрутки 0 0;
  }
  .  owl-carousel .next-slide:hover{
    background: url(../images/right-arrow-hover.png) без повтора прокрутки 0 0;
  }
  @медиа только экран
   и (максимальная ширина: 600 пикселей) {
    .owl-carousel .prev-slide{
        дисплей: нет;
    }
    .сова-карусель .следующий слайд{
        дисплей: нет;
    } 

 <голова>
    
    
   
 
 
 <тело>
 
 <раздел>
        <дел>
          <дел>
             
Познакомьтесь с командой