CODEWITHSUNDEEP
slick.js
Philipp S.
Philipp S.

Reputation: 981

Slick slider: center and fit to imagesize

How can I fit slick slider to the size of the image and center whole slick horizontal without giving slick a fixed width?

https://jsfiddle.net/5ox31m2a/5525/

$('.slider').slick({
    dots: true,
    infinite: true,
});

Upvotes: 0

Views: 2035

Answers (1)

Eternal
Eternal

Reputation: 933

$('.slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
  	slidesToScroll: 1
});
.slider {
    margin: 0 auto;
}
.center{
  display: table;
}
.center img{
  display: table-cell;
  margin: auto;
}
img {
    width: 50%;
    height: auto;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

body {
  padding: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div >
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div >

now place your image with the width you want and it will work just fine.

https://jsfiddle.net/5ox31m2a/6032/

Upvotes: 1

Related Questions