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.

5
  • How do you know Owl isn't included in global JS? It won't always be in a twig file.
    – Kevin
    Oct 29, 2018 at 13:25
  • Oh, really? I have no Idea, should look. But I have a doubt
    – esQmo_
    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 %} ?
    – esQmo_
    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
    – Clive
    Oct 29, 2018 at 14:19
  • Thanks, that's what I'm trying to figure out. haven't found so far
    – esQmo_
    Oct 29, 2018 at 14:52

1 Answer 1

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)

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 :(
    – esQmo_
    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?
    – esQmo_
    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
    – Hudri
    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
    – Hudri
    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}}})
    – esQmo_
    Oct 29, 2018 at 16:01

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.