Get started with ouibounce CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with ouibounce CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  <link rel="stylesheet" href="https://cdn.cdnhub.io/ouibounce/0.0.12/ouibounce.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <script src="https://cdn.cdnhub.io/ouibounce/0.0.12/ouibounce.min.js"></script>
  <style>
    #myCarousel .owl-carousel {
      width: 100%;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="myCarousel" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
  </div>

  <script>
    $(document).ready(function() {
      $('#myCarousel').owlCarousel({
        items: 1,
        loop: true,
        nav: false,
        dots: false,
        autoplay: true,
        autoplayTimeout: 2000,
        autoplayHoverPause: true
      });

      new OUIBounce.Bounce(document.querySelector('#myCarousel'), {
        threshold: 0.5,
        bounce: 1.5,
        easing: 'easeOutQuad'
      });
    });
  </script>
</body>
</html>
Get started with ouibounce CDN

Stable version

How to start using ouibounce CDN

All versions
