Add class to individual Owl Carousel slides

[LukeDouglas2]

One of the shortcomings of the Owl Carousel in the Helium template is the lack of classes in each individual slide. So I have added it to one of my sites and it works great.

Here is how to do it.

In the "templates\g5_helium\particles" folder, open the "owlcarousel.yaml" file and make this change. Below the 'buttonclass' add the 'slideclass' code.

[code=css]

    .buttonclass:
      type: input.text
      label: Button Class
      description: Input the button class.
      default: 'button-outline'
    .slideclass:
      type: input.text
      label: Slide Class
      description: Input the slide class.
      default: 'slide-container'

[/code]

Once this is done, your slides should have a new field to add a slide class like the image below.

https://webbering.com/images/troubleshooting/owl-carousel-add-slide-class.jpg

In the "templates\g5_helium\particles" folder, open the "owlcarousel.html.twig" file and make this change.

[code=css]

ORIGINAL:

CHANGE:

[/code]

In your page, the slide class is displayed and you can style individual slides without having to use that dreaded 'nth-child' selector! :)

As you can see, I styled this particular slide to pad the H1 and H2 by 50% to move the text to the right side of the slide while leaving the link and navigation dots centered as well as changing the font size of the header tags.

https://webbering.com/images/troubleshooting/owl-carousel-displayed-slide-class.jpg

Enjoy!

NOTE TO GANTRY DEVELOPERS: Add this to a future update of the Helium template! :)

[mahagr]

@newkind Good idea here, what do you think?

[LukeDouglas2]

mahagr,

It could be implemented using the code I provided. After all, it was something that I needed and I'm pretty sure other website developers who are committed to the Joomla / Gantry frameworks (as well as Wordpress), probably could use this functionality. The issue with using NTH-CHILD is that it would require modification if slides were dropped or added. By having the class, that removes that problem.

Just a thought!

I have never 'committed' a change to the Gantry Framework or to one of the default templates so, to be honest, I'm not sure how I would go about doing that so I'll leave this up to someone on the team.

On a side note, let me say that I really appreciate the effort that the development team has put into the Gantry Framework. It has reduced my website development, redesign and maintenance time which frees up additional time for new clients. You have made me money! I've never need anyplay to make a donation to help offset costs associated with the development team so if there is a place for making a donation, put the link here!

[santemazzei]

@LukeDouglas2 Hi! I've the same problem with Helium template.
In the owl carousel i need to move the text on the left and also to resize the font of the title and of the description of the item.
I can't see the second code you posted in the December. Can you post it again?

These are my first steps into the world of Joomla and for the moment it's pretty difficult.

Thank you!

[LukeDouglas2]

Santemazzei,

I have a tutorial here http://www.rockettheme.com/forum/gantry5-for-joomla/273922-add-class-to-owl-carousel-individual-slides?start=0#1371622

I tried to insert the code again but Github is not inserting it so here is a link to a PDF of the tutorial.

https://webbering.com/downloadme/Add%20CLASS%20to%20Owl%20Carousel%20individual%20slides.pdf

[LukeDouglas2]

Here is a link to a tutorial:

https://webbering.com/downloadme/Add_CLASS_to_Owl_Carousel_individual_slides.pdf

[N8Solutions]

@LukeDouglas2 Thanks for sharing!
@newkind Any chance of getting this added to a future update of the Owl Carousel in the Helium Template?

[santemazzei]

@LukeDouglas2 Thank you! But can you explain how to create a different class for the slide, with a differente size of the font and position of the text?

Thank you.

[LukeDouglas2]

santemazzei,

If you look at the tutorial document, you will see the class 'slide-aladdin' in the same DIV as the 'g-owlcarousel-item-wrapper' class. The 'blue' highlighted H1 tag shows on the sidebar how I used the 'slide-aladdin' class to change the style for the H1 tag . As you can see, the code is as follows:

@media only all and (min-width: 75rem) .slide-aladdin .g-owlcarousel-item-content-container h1 { font-size: 2.25rem; padding-left: 50% !important; }

It works fine. Once you have set the class you want to assign to a specific slide, you have the ability to style any of the elements inside the 'owlcarousel-item-wrapper' DIV, which is the full-width container for each slide. Go to https://southeastalabamadancecompany.org/ and look at the source code or view with the developer inspect tool. You will see two slides with classes 'slide-auditions' and 'slide-performance'. Using both of these classes, I was able to align the header and content text so it appeared where I wanted it to appear for the 'slide-auditions' which is on the right side. The 'slide-performance' is basically not styled as I used the default 'center' styling.

Here is the styling for the 'slide-auditions' which moved the content to the right side:

.slide-auditions .g-owlcarousel-item-content-wrapper { padding-left: 50%; }

If you are unfamiliar with CSS styling and how it can be used to dynamically change how content appears as well as media queries so you can create different styling for the same content depending on what device display width is showing the content, I would highly recommend you spend a few days getting familiar with them.

[newkind]

Added alongside with new version of OwlCarousel in 85dd297 :)