У меня есть слайдер с фотографиями.
Один слайд привязан к другому через конфигурацию 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>
img.slick-active {border:5px solid red;}
img.slick-current {
border:5px solid orange;
transform:scale(1.5);
opacity:0.5;
}
Если добавить стили, все прекрасно работает. В чем проблема-то?
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Есть такой вот скрипт для построения дерева, я задаю в input значения, и после нажатия кнопки ajax-ом строится дерево, но при перезагрузки страницы...
Есть следующие функции в WinApi:
У меня есть текстЯ хочу часто добавлять в него строки или удалять
Столкнулся с проблемойНужно взять данные с файла и ввести их на сайте с задержкой между знаками (имитация ввода с клавиатуры)