Slick Slider with auto width

index.html

<div class="wrapper">
  <h2>Slick Slider</h2>
  <div class="slick-codepen">
    <div>
      <img src="http://lorempixel.com/540/300/nightlife/1" />
      1
    </div>

    <div>
      <img src="http://lorempixel.com/320/340/nightlife/10" />
      2
    </div>

    <div>
      <img src="http://lorempixel.com/520/400/nightlife/3" />
      3
    </div>

    <div>
      <img src="http://lorempixel.com/380/300/nightlife/4" />
      4
    </div>
    
      <div>
      <img src="https://pp.vk.me/c623826/v623826791/47267/FIH1torcSus.jpg" />
      4
    </div>

    <div class="slick-slide">
      <img src="http://lorempixel.com/500/320/nightlife/5" />
      5
    </div>
  </div>
</div>

script.js

$('.slick-codepen').slick({
  draggable: true,
  accessibility: false,
  centerMode: true,
  variableWidth: true,
  slidesToShow: 1,
  arrows: true,
  dots: true,
  swipeToSlide: true,
  infinite: false
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

Slick Slider with auto width.markdown

Slick Slider with auto width

http://kenwheeler.github.io/slick/

Forked from Josh Adamous's Pen Slick Slider.

A Pen by Vladislav on CodePen.

License.

style.css

body { background-color: #fff; }

.slick-initialized .slick-slide {
  display: block;
  filter: alpha(opacity=40);
  opacity: 0; 
  transition: all 0.3s ease-out;
}
	
.slick-initialized .slick-center {
  display: block;
  filter: alpha(opacity=100);
  opacity: 1; 
  transition: all 0.3s ease-out;
}

.wrapper {
  width: 60%;
  margin: 0 auto;
  
  h2 {
    color: #3498DB;
    opacity: .85;
    font-family: 'Pacifico';
    font-weight: 100;
    letter-spacing: 1px;
    font-size: 36px;
    margin: 15px 0;
  }
}

.slick-codepen {
  width: 100%;
  height: 340px;
  background-color: #fff;
  
  .slick-slide {
    height: 340px !important;
    
    img {
      margin: 0;
      padding: 0;
      display: block;
      height: 100%;
    }
  }
  
  .slick-prev { left: 0; }
  .slick-next { right: 0; }
  
  .slick-prev, .slick-next {
    background-color: rgba(0, 0, 0, 0);
    top: 10px;
    width: 20%;
    height: 100%;
    transition: all 0.3s ease-out 0s;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.25);
      
      &:before { color: rgba(255, 255, 255, 0.65); }
    }
    
    &:before {
      font-size: 38px;
      color: rgba(0,0,0,0);
      transition: all 0.3s ease-out;
    }
  }
  
  .slick-dots {
    width: 100%;   
    bottom: -68px;
    border-bottom: 1px solid #3498DB;
    padding: 15px 0;
    
    li.slick-active button:before { color: #3498DB; margin-top: 1px; font-size: 10px;}
  }
}

@media screen and (max-width: 480px) {
  .slick-codepen, .slick-codepen .slick-slide { height: 220px; }
  .wrapper { width: 100%; }
}

styles

<link href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />