Spyre Spyre

Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Usage

HTML

<div data-carousel-options='{"autoplay":true,"margin":15,"nav":true,"loop":true,"dots":false,"autoWidth":true,"responsive":{"0":{"items":1},"576":{"items":3}}}' class="owl-carousel carousel-nav-edge carousel-nav-primary">
    <div><img src="../assets/img/img-07.jpg" style="width: 200px;" alt="" /></div>
    <div><img src="../assets/img/img-08.jpg" style="width: 200px;" alt="" /></div>
    <div><img src="../assets/img/img-09.jpg" style="width: 200px;" alt="" /></div>
    <div><img src="../assets/img/img-10.jpg" style="width: 200px;" alt="" /></div>
    <div><img src="../assets/img/img-11.jpg" style="width: 200px;" alt="" /></div>
</div>
CSS

<!-- Vendor Stylesheets -->
<link href="../assets/vendor/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
JavaScript

<!-- Vendor Javascripts -->
<script src="../assets/vendor/owl.carousel/dist/owl.carousel.min.js"></script>

Use the following classes along with .owl-carousel to update the navigtation position and type:

  • carousel-nav-primary makes the navigation using primary color and different shape
  • carousel-nav-edge moves the navigations to the edge of the carousel
  • carousel-nav-inside-container will calculate the container size and use as a width

For more Details see Owl Carousel Documentation