0

I'm very new to Drupal and not (yet) familiar with the terms and namings.

I came across a web site in Drupal 8 that uses Paragraph. I'm trying to reproduce the slideshow that apparently uses Owl carousel. But I'm confused about how they made that slider:

enter image description here (These images slide from right to left)

In the Inspector, the code shows that Owl carousel used in the div wrapper and each item. But there is no owl included in the template twig file.

Inspector screenshot: Inspector screenshot

Template twig file:

 <div class="our_partners_area bg_gary py-70 pb_0"> <div class="container"> <div class="our_partners_h wow fadeInUp"> <h1>{{content.field_title.0}}</h1> <p>{{content.field_description.0}}</p> </div> <!--#Start assets/images start --> <div class="partners wow fadeInUp"> {% for item in paragraph.field_client_image %} <div class="item"> <img src="{{ file_url(item.entity.uri.value) }}" alt=""> </div> {% endfor %} </div> <!--#End assets/images --> <div class="bottom-partner wow fadeInRight text-center" style="visibility: visible; animation-name: fadeInRight;"> <a id="#services" href="{{ content.field_button.0['#url'] }}" class="btn btn-default wow fadeInUp js-scroll-trigger" data-wow-delay=" 0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;"><span class="skew_14">{{ content.field_button.0['#title'] }} </span></a> </div> </div> </div>

I assume the below code generates the classes owl-item, owl-item cloned:

{% for item in paragraph.field_client_image %} <div class="item"> <img src="{{ file_url(item.entity.uri.value) }}" alt=""> </div> {% endfor %}

Anyone can enlighten my candle?

PS: I have access to all templates files and even have access to the site: no Owl carousel module installed but the libraries is present.

Thanks for your time.

Improve this question
5
  • How do you know Owl isn't included in global JS? It won't always be in a twig file. Commented Oct 29, 2018 at 13:25
  • Oh, really? I have no Idea, should look. But I have a doubt Commented Oct 29, 2018 at 13:43
  • But my question is how it is included in that particular line: {% for item in paragraph.field_client_image %} ? Commented Oct 29, 2018 at 13:47
  • It isn’t @esQmo_, that line is looping through an array. It’s included elsewhere. Probably in a field widget class or template Commented Oct 29, 2018 at 14:19
  • Thanks, that's what I'm trying to figure out. haven't found so far Commented Oct 29, 2018 at 14:52

1 Answer 1

Reset to default
2

You have to separate between two components:
A) Markup generated on server-side by Drupal, which is used as base structure for Owl carousel.
B) Markup modified by Owl in the client's browser.

Drupal render's something like

<div class="partners wow fadeInUp"> <!-- the for loop renders one <div><img></div> per paragraph on server side --> {% for item in paragraph.field_client_image %} <div class="item"> <img src="{{ file_url(item.entity.uri.value) }}" alt=""> </div> {% endfor %} </div>

The code above is not really depending or specific for Owl carousel.

The thing transforms it to a carousel is a JS call similar to

$(document).ready(function(){ $(".partners").owlCarousel(); });

somewhere else in a JS file of your theme or a module. This is the "magic" that transforms the server-rendered HTML to something like your screenshot is showing (adding additional <div>s, classes and styles)

Improve this answer
5
  • Thanks for your answer. I tried to reproduce what they made but no luck, I have even copied their files, modified info.yml and libraries.yml file to point to the files, still can't reproduce it :( Commented Oct 29, 2018 at 14:53
  • Is there a way to know which JS file is being used? Like we do with twig files in debug mode? Commented Oct 29, 2018 at 14:58
  • Learn how to use a JavaScript debugger, but this topic is way to broad for this Q&A site Commented Oct 29, 2018 at 15:02
  • You might try your luck with a code search for .owlCarousel() in your theme directory... but this is just a wild guess, it could be in a module too Commented Oct 29, 2018 at 15:08
  • Hey, found this line in theme.js : o(".partners").length&&o(".partners").owlCarousel({loop:!0,items:5,margin:110,autoplay:!0,response:!0,responsive:{300:{items:1,margin:0},500:{items:3},700:{items:3},800:{items:4,margin:40},1e3:{items:5}}}) Commented Oct 29, 2018 at 16:01

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.