Как задать такие стили для слайдера

175
19 июня 2018, 15:50

У меня есть слайдер с фотографиями.

Один слайд привязан к другому через конфигурацию asNavFor: 'связанный блок',

Есть две стрелочки на два слайда.Никак не могу изменить внешний вид активного слайда таким образом как на картинке посмотрите на оранжевые круглые фото .Чтобы в активном слайде был border и scale также opacity ну вот все перепробовал но не смог найти

ссылка на Codepen

$(document).ready(function() { 
    $('.top_slider').slick({ 
      dots: false, 
      infinite: true, 
      //              centerMode: true, 
      speed:800, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      asNavFor: '.slide_employers', 
      //              centerPadding: '220px', 
      arrows: true, 
      prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>', 
      nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>' 
         
    }); 
     
  }); 
 
  $('.slide_employers').slick({ 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    centerMode: true, 
    arrows: false, 
    infinite:true, 
     
    });
.about_us { 
  width: 100%; 
  position: relative; 
} 
.about_us .our_team_title { 
  font-family: "montserrat"; 
  font-size: 26px; 
  font-weight: bold; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: normal; 
  letter-spacing: -0.3px; 
  text-align: left; 
  color: black; 
} 
.about_us .our_team_title span { 
  color: orange; 
} 
.about_us p { 
  font-family: "montserrat"; 
  font-size: 16px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 2; 
  letter-spacing: normal; 
  text-align: left; 
  color: #999999; 
} 
.about_us .slide_employers { 
  width: 50%; 
  display: flex; 
  height: 80px; 
} 
.about_us .slide_employers .employer_icon { 
  width: 48px; 
  height: 48px; 
  background-color: #cccccc; 
  border-radius: 50%; 
} 
 
.slide { 
  position: relative; 
  display: flex; 
} 
.slide img { 
  width: 50%; 
  float: right; 
} 
.slide h2 { 
  width: 50%; 
} 
 
.slick-center img { 
  -webkit-transform: scale(1.08); 
  border: 6px solid #ffb338; 
  transform: scale(1.08); 
  opacity: 1; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/> 
<div class="about_us"> 
  <h1 class="our_team_title">Our <span>Team</span></h1> 
  <p>We are a small team of designers and developers from San Francisco.</p> 
  <div class="slide_employers"> 
    <img class="employer_icon" src="https://img.huffingtonpost.com/asset/5a0983ca1b00004800376c2f.jpeg?cache=limsr63nzp&ops=crop_183_429_1526_1234,scalefit_720_noupscale" alt="Bill Gates"> 
    <img class="employer_icon" src="https://24smi.org/public/media/2017/7/6/cristiano-ronaldo-the-best-fifa-football-awards-09012017_kduocf9mtdj1gonxjzdhwsj9.jpg" alt="Warren Buffet"> 
    <img class="employer_icon" src="https://s.hs-data.com/bilder/spieler/gross/19198.jpg" alt="Tim Cook"> 
    <img class="employer_icon" src="https://s.hs-data.com/bilder/spieler/gross/19198.jpg" alt="Satya Nadella"> 
    <img class="employer_icon" src="https://s.hs-data.com/bilder/spieler/gross/19198.jpg" alt="Sundar"> 
    <img class="employer_icon" src="https://s.hs-data.com/bilder/spieler/gross/19198.jpg" alt="Sundar"> 
    <img class="employer_icon" src="https://s.hs-data.com/bilder/spieler/gross/19198.jpg" alt="Tim Cook"> 
    <img class="employer_icon" src="https://img.huffingtonpost.com/asset/5a0983ca1b00004800376c2f.jpeg?cache=limsr63nzp&ops=crop_183_429_1526_1234,scalefit_720_noupscale" alt="Satya Nadella"> 
    <img class="employer_icon" src="https://img.huffingtonpost.com/asset/5a0983ca1b00004800376c2f.jpeg?cache=limsr63nzp&ops=crop_183_429_1526_1234,scalefit_720_noupscale" alt="Sundar"> 
    <img class="employer_icon" src="https://i.kinja-img.com/gawker-media/image/upload/s--eNw_2EtI--/c_scale,f_auto,fl_progressive,q_80,w_800/19engrmo05c5qpng.png" alt="Sundar"> 
    <img class="employer_icon" src="https://i.kinja-img.com/gawker-media/image/upload/s--eNw_2EtI--/c_scale,f_auto,fl_progressive,q_80,w_800/19engrmo05c5qpng.png" alt="Sundar"> 
    <img class="employer_icon" src="https://i.kinja-img.com/gawker-media/image/upload/s--eNw_2EtI--/c_scale,f_auto,fl_progressive,q_80,w_800/19engrmo05c5qpng.png" alt="Sundar"> 
  </div> 
  <section class="top_slider"> 
    <div class="slide"> 
      <img src="https://unsplash.it/400/250"> 
      <h2>text 1</h2> 
    </div> 
    <div class="slide"> 
      <img src="http://placehold.it/400x250"> 
      <h2>text 2</h2> 
    </div> 
    <div class="slide"> 
      <img src="https://unsplash.it/400/250"> 
      <h2>text 3</h2> 
    </div> 
  </section> 
</div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

Answer 1
img.slick-active {border:5px solid red;}
img.slick-current {
  border:5px solid orange;
  transform:scale(1.5);
  opacity:0.5;
}

Если добавить стили, все прекрасно работает. В чем проблема-то?

READ ALSO
Как передать значения в input из Local Storage

Как передать значения в input из Local Storage

Есть такой вот скрипт для построения дерева, я задаю в input значения, и после нажатия кнопки ajax-ом строится дерево, но при перезагрузки страницы...

180
Вопрос по WinAPI функциям GetExtendedUdpTable и GetExtendedTcpTable

Вопрос по WinAPI функциям GetExtendedUdpTable и GetExtendedTcpTable

Есть следующие функции в WinApi:

168
Cохранить текст с определенной строки

Cохранить текст с определенной строки

У меня есть текстЯ хочу часто добавлять в него строки или удалять

173
Ввод данных с задержкой между знаками в selenium

Ввод данных с задержкой между знаками в selenium

Столкнулся с проблемойНужно взять данные с файла и ввести их на сайте с задержкой между знаками (имитация ввода с клавиатуры)

149