Нужно реализовать слайдер как на картинке. Сделала при помощи slick слайдера, но нигде в настройках не нашла строчки, что бы картинка в центре увеличилась. Вот код
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows:false,
infinite: true,
//variableWidth: true,
arrows:true,
nextArrow: '.project__next',
prevArrow: '.project__prev',
});
#container{
max-width: 950px;
margin: 0 auto;
max-height: 100%;
}
.slider{
max-width:600px;margin: 20px auto;
}
.project__next img, .project__prev img{
width:50px;
height:20px;
}
img {
max-width: 130px;
width: 100%;
border:1px solid #fff;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="project__prev">
<img src="https://media.msufcu.org/publicsites/publicsite/icons/arrow_left_gray.png">
</div>
<div class="slider">
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="project__next">
<img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg">
</div>
</div>
Подскажите, как сделать так, что бы центральная картинка увеличилась в размере при клике на кнопки вперед и назад.
Центрируйте слайдер centerMode: true
, и стилизуйте класс .slick-center
$('.slider').slick({
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1,
dots: false,
arrows:false,
infinite: true,
variableWidth: true,
arrows:true,
nextArrow: '.project__next',
prevArrow: '.project__prev',
});
#container{
max-width: 950px;
margin: 0 auto;
max-height: 100%;
}
.slider{
max-width:600px;margin: 20px auto;
}
.project__next img, .project__prev img{
width:50px;
height:20px;
}
img {
max-width: 130px;
width: 100%;
border:1px solid #fff;
}
.slick-slide {
padding-top:20px;
}
.slick-center {
padding-top:0;
}
.slick-center img {
max-width:160px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="project__prev">
<img src="https://media.msufcu.org/publicsites/publicsite/icons/arrow_left_gray.png">
</div>
<div class="slider">
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="project__foto">
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="project__next">
<img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg">
</div>
</div>
Есть блок выше кнопок под названием <div class="btnxxx"> в котором кнопки и после нажатия они меняются , я бы хотел чтобы была перезагрузка страницы,...
Допустим у меня есть текст, который называется "Шаг 1" Мне необходимо, чтобы при нажатии на кнопку, к называнию текста "Шаг 1" добавлялась единичка,...
Не могу понять причину проблемыВся страница отображается со сдвигом
Не могу понять, как правильно реализовать вставку иконок через фоновое изображение так, чтобы текст располагался справа, а не под картинкой...