0
Welcome Guest! Login
0 items Join Now

SOLVED Tutorial: How to add an 'item' class to Owl Carousel items.

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

    SOLVED Tutorial: How to add an 'item' class to Owl Carousel items.

    Posted 7 years 11 months ago
    • Have you ever needed an item class for each individual Owl Carousel item?

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


      So when the webpage is rendered, you get the class in your HTML code like this:
      <div class="g-owlcarousel-item owl-item justify-flex-start">

      And you can style it to make your Owl Carousel content align to the left, right or center like this:
          .justify-flex-start .g-owlcarousel-item-content-wrapper {text-align:left;justify-content: flex-start;}
	.justify-flex-end .g-owlcarousel-item-content-wrapper {text-align:right;justify-content: flex-end;}
	.justify-center .g-owlcarousel-item-content-wrapper {text-align:center;justify-content: center;}

      Then download this zip file for the particle changes and put the contents into the 'TEMPLATE-NAME/custom/particles' folder.
      Download Zip

      Now do your CSS styling to match up with the class name you used.

      That's it! Enjoy!
    • Last Edit: 7 years 11 months ago by Luke Douglas.

    • The following users have thanked you: Kat05, Matt

    • Just another old hacker!
    #1343793

Time to create page: 0.046 seconds