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>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <link rel="stylesheet"  href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css" />
    <link rel="stylesheet"  href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.lazyload.css" />
    <link rel="stylesheet"  href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.animate.css" />
    <link rel="stylesheet"  href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.autoheight.css" />
  </head>
  <body>
    <div class="owl-carousel">
      <div class="">
        <img src="http://placehold.it/350x150&text=1" />
      </div>
      <div class="">
        <img src="http://placehold.it/350x150&text=2" />
      </div>
      <div class="">
        <img src="http://placehold.it/350x150&text=3" />
      </div>
      <div class="">
        <img src="http://placehold.it/350x150&text=4" />
      </div>
    </div>
​
    <div class="carousel_selector">
      <a href="" data-to="0">0</a>
    </div>
    <div class="carousel__selector">
      <a href="" data-t="1">1</a>
    </div>
    <div class="carousel_selector">
      <a href="" data-to="2">3</a>
    </div>
    <div class="carousel_selector">
      <a href="" data-to="3">4</a>
    </div>
​
    <script src="http://code.jquery.com/jquery-git2.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.support.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.lazyload.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.autoheight.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.video.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.animate.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.autoplay.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.navigation.js"></script>
    <script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.hash.js"></script>
  </body>
</html>
 
$(function() {
  var carousel = $(".owl-carousel");
​
  carousel.owlCarousel({
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 500,
    items: 1,
    loop: true
  });
​
  $('.carousel_selector a').on('mouseover', function (e){
    carousel.trigger('stop.owl.autoplay');
  });
​
  $('.carousel_selector a').on('mouseleave', function (e){
    carousel.trigger('play.owl.autoplay');
  });
​
  $('.carousel_selector a').on('click', function (e){
    e.preventDefault();
    var slideTo = $(this).data('to');
    carousel.trigger('to.owl.carousel', [slideTo]);
    carousel.trigger('stop.owl.autoplay');
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers