Shortcode Owl Carousel integration in Editorial and Future2021 themes

1

Hello.

Recently, I’ve been researching why the owl carousel shortcode plugin doesn’t integrate well with themes like Editorial or Future2021. Both themes have a sidebar and the mentioned plugin does not integrate well, causing the sidebar to shrink and not display correctly.

This is the result of inserting the shortcode owl carousel plugin into Future2021:

owlcarousel1
owlcarousel11907×890 139 KB

I have made a copy of the owl-carousel.html.twig file in the templates\partials folder and included the following modification:

{% block stylesheets %}
     <style>
         .wrapper-carousel-{{ owl_id }} {
             display: flex;
             width: 100%;
             }
         .carousel-{{ owl_id }} {
             width: 0;
             margin-bottom: 2rem;
             flex-basis: 100%;
                     }
     </style>

{% endblock %}

<div class="wrapper-carousel-{{ owl_id }}">
     <div class="carousel-{{ owl_id }}">
         <div class="owl-carousel owl-theme" id="{{ owl_id }}">
             {{ owl_items|regex_replace('(^\n?<p>|<\/p>$)','')|raw }}
         </div>
     </div>
</div>

Adding this small modification, the shortcode owl carousel plugin is inside a flex container, which means that it doesn’t push the sidebar outside of the main template container (Future2021 in this case).

This is what the plugin looks like with this modification:

owlcarousel2
owlcarousel21866×892 158 KB

I hope this modification can help those people who are currently using the Editorial and Future2021 themes, and others experiencing the same problem.
Also, I will try to create a Pull Request to the development branch of the plugin on GitHub, so that the developers of the plugin can integrate these modifications and this make the plugin more versatile.