Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
​
  <section id="carousel">
  <div class=" position-relative">
    <div class="container">
      <div class="slider">
        <div class="slide">
          <h1>Slide 1</h1>
        </div>
        <div class="slide">
          <h1>Slide 2</h1>
        </div>
        <div class="slide">
          <h1>Slide 3</h1>
        </div>
        <div class="slide">
          <h1>Slide 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>
​
​
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
​
</body>
</html>
 
.slide {
  background: green;
  height: 500px;
}
​
.container {
  margin: 500px 0;
}
 
  var slider = $('.slider');
  $('.slider').slick({
    dots: false,
    vertical: true,
    arrows: false,
    variableWidth: false,
  });
​
  slider.on('wheel', (function(e) {
    e.preventDefault();
​
    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickPrev');
    } else {
      $(this).slick('slickNext');
    }
  }));
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers