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.

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

  • 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 '18 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 '18 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 '18 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 '18 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 '18 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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