Как в циклической карусели изменить у центрального элемента прозрачность?

1004

10 декабря 2016, 10:40

Есть зацикленная карусель owl carousel 2 у которой элементы изначально полупрозрачные, а при наведении становятся непрозрачными. Хочу сделать так, чтобы независимо от количества элементов в карусели центральный блок был всегда непрозрачным. Пробовал это сделать через :nth-child(), но проблема в том, что в зацикленной карусели создаются дополнительные клонированные блоки и не получается сделать центральный элемент непрозрачным - что можно предпринять? фидл

$('.owl-carousel').owlCarousel({ 
    loop: true, 
    margin: 10, 
    autoWidth: true, 
    autoplay:true, 
    autoplayTimeout:2000, 
    autoplayHoverPause:true, 
    responsive: { 
        0: { 
            items: 1 
        }, 
        868: { 
            items: 2 
        }, 
        1040: { 
            items: 3 
        }, 
        1300: { 
            items: 4, 
            margin: 20 
        }, 
        3070: { 
            items: 5, 
            margin: 20 
        } 
    } 
})

.item { 
    width: 185px; 
} 
.owl-carousel .item { 
    height: 10rem; 
    background: #4DC7A0; 
    padding: 1rem; 
    opacity:0.3; 
} 
.owl-carousel .item.active:nth-of-type(2) { 
  opacity:1; 
} 
  .owl-carousel .item:hover { 
      opacity:1; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/> 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/> 
<div class="owl-carousel"> 
    <div class="item"> 
        <h4>1</h4> 
    </div> 
    <div class="item"> 
        <h4>2</h4> 
    </div> 
    <div class="item"> 
        <h4>3</h4> 
    </div> 
    <div class="item"> 
        <h4>4</h4> 
    </div> 
    <div class="item"> 
        <h4>5</h4> 
    </div> 
    <div class="item"> 
        <h4>6</h4> 
    </div> 
    <div class="item"> 
        <h4>7</h4> 
    </div> 
    <div class="item"> 
        <h4>8</h4> 
    </div> 
    <div class="item"> 
        <h4>9</h4> 
    </div> 
    <div class="item"> 
        <h4>10</h4> 
    </div> 
    <div class="item"> 
        <h4>11</h4> 
    </div> 
    <div class="item"> 
        <h4>12</h4> 
    </div> 
</div>

Answer 1

Надо было для .center > div придавать нужные свойства :

.owl-item.center > div {
  margin: 0;
  height: 100px;
  background: red;
  opacity: 1;
}

Дэмо : https://jsfiddle.net/Geyan/rtvc5exr/6/

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как выводить объект через Id на js?

Допустим мы пользуемся JSON API Tumblr ну или любой какой то летныИ когда получаем значение photo-caption через jquery то содержания записей получаем в таком...

238

HTML

HTML в ListView

Доброго времени сутокИмеется html-текст, выводимый в ListView

294

HTML

psd в wordpress

Я верстаю обычные страницыНо есть много заказов типа "psd to wordpress", чем отличается верстка под вордпресс от обычной? Что нужно дополнительно...

246

HTML

Как подобрать селектор с атрибутом в котором содержится переменная?

Подскажите как подобрать селектор с атрибутом, в котором содержится переменная? Например, есть поле input с атрибутом nameЗначение поля name value:...

275