Carousel with List

  

Hey all,

On my web app, I have a Carousel with a List Record inside to display dynamic content.

For some reason though, I keep getting an annoying blank space between list items. 

Using the "Inspect Element" on my Browser I went on the generated CSS class "owl-item i0 active" and managed to completely remove that blank space by changing the width of the inline tag but I don't find that on the CSS on Service Studio. 

Can someone help me out?

Hello Hugo,

Did you make sure to set the Line Separator property to None in the List Records that you are using to feed the Carousel?

Cheers

Hi Hugo,

João's suggestion is a good bet. If it doesn't work can't you just override the class in that pecific screen?


Cheers,

Tiago.

João, yes I have the Line Separator set to none on my list.

Tiago, I've tried to overwrite the class on that specific screen but I wasn't able to. Maybe i'm setting the class in a wrong way.

If I change the width of the inline from 197px to 150px on the Inspect Element it works perfectly but I couldn't find that class on the CSS. It may inherit from another dont know.


Hugo would it be possible to provide a .oml? How does your Carousel look like in Service Studio?
If I am not mistaken that class should be applied to the first item of your Carousel.

Carousel:

How do I override that class on the specific screen?

I've tried this without success:

.owl-item.active {
               width: 120px;
}


Hugo,

I'm wondering if you have a width set for the items under your List? In your posted image above, what is under lstGameCenter?

I wonder if the extra spacing between items is just OS filling in space... trying to space out the items displayed.  E.g. you're showing 6 items, each about 150px wide... but the total width of 900px is less than the width of the container... so OS is spacing out the items.

If that's the case, and you want the carousel centered, then wrap your Content/Box in a Container... and set that Container width to 900... and Center.

Now you'll have a Container... set to fill parent... and inside that... a Container of 900px... and inside that... your 6 150px items.  Now... OS doesn't have to add space to fill the area.

Hugo Nobre wrote:

I've tried this without success:

.owl-item.active {
               width: 120px;
}


The width is applied directly into the element's style property, so overridind the associated cvlass does not work. As mentioned before, you must try to understand where the width definition cames from.


Got it working.

Many thanks for the help.

Only one more thing and its related to the List. I need to apply different styling to the odd and even List Items.
I've tried adding an extended property to the List Item container like this:

style

="background-color: " + If((lstGameCenter.List.CurrentRowNumber / 2)=0,"Red","Green")

but only the first item is Red and all the other items are green. Any idea why?

Solution

Try this instead.  The Owl Carousel presents each item within a div.  All those divs are wrapped in a div with a class of owl-wrapper.  Because of this, you can use some interesting css.

In your Web Screen property... Style Sheet... add this...

SyntaxEditor Code Snippet

div.owl-wrapper > div:nth-of-type(odd){
    border:solid;
    border-color:green;
}
div.owl-wrapper > div:nth-of-type(even){
    border:solid;
    border-color:red;
}

Here I'm using border stuff because I'm displaying images... and so background stuff won't do for my case.

Solution

Brilliant. Got it.

Many thanks to all for the help.