0
Welcome Guest! Login
0 items Join Now

SOLVED Add CLASS to Owl Carousel individual slides

Last Post
Search Topic
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 322
    • Thanks: 15
    • Another Old Hack!

    SOLVED Add CLASS to Owl Carousel individual slides

    Posted 7 years 3 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: 7 years 3 months ago by Luke Douglas.

    • The following users have thanked you: David Goode, Kat05, MrT, Matt, Damir

    • Just another old hacker!
    #1371622
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 322
    • Thanks: 15
    • Another Old Hack!

    Re: SOLVED Add CLASS to Owl Carousel individual slides

    Posted 6 years 8 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!
    #1389584

Time to create page: 0.041 seconds