Touch, Swipe, Mouse Wheel, and Responsive Slider Owl Carousel 2 [jQuery Plugin]

This time, I will introduce “Owl Carousel 2,” a jQuery plugin that makes it easy to implement a slider that supports touch, swipe, mouse wheel, and responsiveness. With this plugin, you can quickly create sliders that work smoothly on various devices such as smartphones, tablets, and PCs. It’s easy to implement, so give it a try!

Steps to Install Owl Carousel 2

First, you need to load the necessary CSS files and JavaScript files to ensure the slider works correctly. Load Google Fonts (Lato:300,400,700,400italic,300italic), the CSS files docs.theme.min.css, owl.carousel.min.css, and owl.theme.default.min.css. Additionally, load the JavaScript files html5shiv.js, respond.min.js, jquery.min.js, and owl.carousel.js. Add the following code to your HTML:

<!-- Stylesheets -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./assets/css/docs.theme.min.css">

<!-- Owl Stylesheets -->
<link rel="stylesheet" href="./assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/owlcarousel/assets/owl.theme.default.min.css">

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<!-- JavaScript -->
<script src="./assets/vendors/jquery.min.js"></script>
<script src="./assets/owlcarousel/owl.carousel.js"></script>

This completes loading the necessary files.

HTML Structure

Next, write the HTML code to slide multiple pieces of content in the center. Owl Carousel offers a variety of options, so adjust them as needed while referring to the official documentation.

Below is an example of basic HTML code:

<h1 style="text-align: center;">Slide multiple pieces of content in the center.</h1>

<section id="demos">
  <div class="row">
    <div class="large-12 columns">
      <h4 id="center-with-loop">Center with loop</h4>
      <div class="loop owl-carousel owl-theme">
        <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 class="item">
          <h4>5</h4>
        </div>
        <div class="item">
          <h4>6</h4>
        </div>
        <div class="item">
          <h4>7</h4>
        </div>
        <div class="item">
          <h4>8</h4>
        </div>
        <div class="item">
          <h4>9</h4>
        </div>
        <div class="item">
          <h4>10</h4>
        </div>
        <div class="item">
          <h4>11</h4>
        </div>
        <div class="item">
          <h4>12</h4>
        </div>
      </div>
      <br>

      <h4 id="center-without-loop">Center without loop</h4>
      <div class="nonloop 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 class="item">
          <h4>5</h4>
        </div>
        <div class="item">
          <h4>6</h4>
        </div>
        <div class="item">
          <h4>7</h4>
        </div>
        <div class="item">
          <h4>8</h4>
        </div>
        <div class="item">
          <h4>9</h4>
        </div>
        <div class="item">
          <h4>10</h4>
        </div>
        <div class="item">
          <h4>11</h4>
        </div>
        <div class="item">
          <h4>12</h4>
        </div>
      </div>

    </div>
  </div>
</section>

With this code, you can create both a looping slider and a non-looping version.

JavaScript Settings

The JavaScript code to configure Owl Carousel’s behavior is as follows. Here, Owl Carousel is applied to elements with the specified class in the slider area.

<!-- Vendors -->
<script src="./assets/vendors/highlight.js"></script>
<script src="./assets/js/app.js"></script>

<script>
jQuery(document).ready(function($) {
  $('.loop').owlCarousel({
    center: true,
    items: 2,
    loop: true,
    margin: 10,
    responsive: {
      600: {
        items: 4
      }
    }
  });
  $('.nonloop').owlCarousel({
    center: true,
    items: 2,
    loop: false,
    margin: 10,
    responsive: {
      600: {
        items: 4
      }
    }
  });
});
</script>

This code also handles responsiveness, changing the number of items displayed depending on the screen width. With this, you can easily implement sliders that display beautifully on both smartphones and PCs.

Owl Carousel 2 Demo Page for Centering Multiple Contents

You can check how it works on the demo page below:

Demo of Centering Multiple Contents with Owl Carousel 2

Source: Owl Carousel 2

Owl Carousel 2

Demos | Owl Carousel

Summary

Owl Carousel 2 is a very useful plugin that allows you to implement highly functional sliders with simple operations. Its features, especially the support for responsiveness and touch/swipe operations, make it very useful for building modern websites. Be sure to try implementing it to experience its convenience.

Check the official documentation and demos to find settings that suit your needs and customize them.

※ Please take responsibility for your own usage when reusing. Do not reuse the Google Analytics tags within the demo page’s head tag.