0
Welcome Guest! Login
0 items Join Now

SOLVED Add CLASS to Owl Carousel individual slides

    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 291
    • Thanks: 13
    • Another Old Hack!

    SOLVED Add CLASS to Owl Carousel individual slides

    Posted 1 year 11 months ago
    • 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.
              .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'


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

      This image is hidden for guests.
      Please log in or register to see it.


      In the "templates\g5_helium\particles" folder, open the "owlcarousel.html.twig" file and make this change.
      ORIGINAL:
                      <div class="g-owlcarousel-item owl-item">
                      
      CHANGE:
                      <div class="g-owlcarousel-item owl-item {{ item.slideclass|e }}">
      

      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.

      This image is hidden for guests.
      Please log in or register to see it.


      Enjoy!

      NOTE TO GANTRY DEVELOPERS: Add this to a future update of the Helium template! :)
    • Last Edit: 1 year 11 months ago by Luke Douglas.
    • The following users have thanked you: David Goode, Kat05, MrT, Matt, Damir

    • Just another old hacker!
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 291
    • Thanks: 13
    • Another Old Hack!

    Re: SOLVED Add CLASS to Owl Carousel individual slides

    Posted 1 year 4 months ago
    • NOTE TO EVERYONE. This functionality has NOW been added to OwlCarousel so this tutorial is no longer needed. Thanks to the development team!!
    • Just another old hacker!

Time to create page: 0.060 seconds