Slick slider: увеличение центральной картинки

641
21 июля 2018, 04:40

Нужно реализовать слайдер как на картинке. Сделала при помощи 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>

Подскажите, как сделать так, что бы центральная картинка увеличилась в размере при клике на кнопки вперед и назад.

Answer 1

Центрируйте слайдер 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>

READ ALSO
Перезагрузка страницы при клике на &lt;button&gt;

Перезагрузка страницы при клике на <button>

Есть блок выше кнопок под названием <div class="btnxxx"> в котором кнопки и после нажатия они меняются , я бы хотел чтобы была перезагрузка страницы,...

183
Как заставить счетчик работать Javascript [закрыт]

Как заставить счетчик работать Javascript [закрыт]

Допустим у меня есть текст, который называется "Шаг 1" Мне необходимо, чтобы при нажатии на кнопку, к называнию текста "Шаг 1" добавлялась единичка,...

180
Проблема с версткой. Сдвиг всей страница вниз.

Проблема с версткой. Сдвиг всей страница вниз.

Не могу понять причину проблемыВся страница отображается со сдвигом

156
Как реализовать фрагмент макета psd

Как реализовать фрагмент макета psd

Не могу понять, как правильно реализовать вставку иконок через фоновое изображение так, чтобы текст располагался справа, а не под картинкой...

182