0

I am trying to call Owl Carousel from a custom module, but despite the short description of how to do that on https://www.drupal.org/node/2412689, can't figure out.

I could use Views, but then I need to call either list of nodes or node fields, but in this case, I have several items which need to be rotated in a variable. I could put them into array if the implementation requires it.

So basically my question is:

Given a list of items in a variable (or array) how can I rotate them using the Owl Carousel module?

Improve this question

1 Answer 1

Reset to default
0

Assuming you've an array, you can print the array items one by one in wrapper <div> tag, and apply Own Carousel to wrapper <div> tag (check owl-demo class in example below). To do this in Drupal, you can process your array in your module to create HTML, and apply JS using drupal_add_js(). To print HTML you can either create a custom block and show on page or create custom page.

Implementing in Drupal with custom module:

function _owl_carousel_demo() {
  $array = array('User 1', 'User 2', 'User 3', 'User 4', 'User 5', 'User 6', 'User 7');
  $output = '<div id="owl-demo" class="owl-carousel">';
  foreach ($array as $value) {
    $output .= '<div class="item"><h1>' . $value . '</h1></div>';
  }
  $output .= '</div>';
  $output .= '<div class="customNavigation">
    <a class="btn prev">Previous</a>
    <a class="btn next">Next</a>
    <a class="btn play">Autoplay</a>
    <a class="btn stop">Stop</a>
  </div></div>';

  drupal_add_css('http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css', 'external');
  drupal_add_js('http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js', 'external');
  drupal_add_js('jQuery(document).ready(function() {
      var owl = jQuery("#owl-demo");
      owl.owlCarousel({
        items : 4,
      });
    });', 'inline');

  return $output;
}

Below example shows complete HTML:

<html>
  <head>
    <link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
  </head>
  <body>
    <?php $array = array('User 1', 'User 2', 'User 3', 'User 4', 'User 5', 'User 6', 'User 7'); ?>
    <div id="demo">
      <div class="container">
        <div class="row">
          <div class="span12">
            <div id="owl-demo" class="owl-carousel">
              <?php foreach ($array as $value) : ?>
                <div class="item"><h1><?php echo $value; ?></h1></div>
              <?php endforeach; ?>
            </div>
            <div class="customNavigation">
              <a class="btn prev">Previous</a>
              <a class="btn next">Next</a>
              <a class="btn play">Autoplay</a>
              <a class="btn stop">Stop</a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <script src="http://owlgraphic.com/owlcarousel/assets/js/jquery-1.9.1.min.js"></script>
    <script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
    <script>
    $(document).ready(function() {
      var owl = $("#owl-demo");
      owl.owlCarousel({
        items : 4, //10 items above 1000px browser width
      });
      // Custom Navigation Events
      $(".next").click(function(){
        owl.trigger('owl.next');
      })
      $(".prev").click(function(){
        owl.trigger('owl.prev');
      })
      $(".play").click(function(){
        owl.trigger('owl.play',1000);
      })
      $(".stop").click(function(){
        owl.trigger('owl.stop');
      })
    });
    </script>
  </body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.