Vertical Carousel(s) in Suivant ReadyTheme

[lesliekirk]

So I've been able to get the CornerstoneUX carousel to slide vertically by adding

vertical: true,

to the function (in this case the Related Products Carousel). Doing this has opened up another set of issues which now look like they could be fixed with tweaks to the stylesheet. The first issue is with the previous and next arrows, they are now both at the top pointing left and right. They need to be pointing up and at the top and pointing down at the bottom.

Something else I've noticed is I think the height that the price (text below the thumbnail) might not be included in the javascript's calculation for slider - the first and last image in the slider are cutoff.

I'm going to keep hacking away at this but I was just wondering if anyone else has done this and might want to share.

[lesliekirk]

Wow - nobody else is trying to use these carousels vertically? Sigh....

[Matt Zimmermann]

Hi Leslie,

The vertical option isn't used very often. You are correct that a lot of CSS updating will be needed to make the default item in Suivant respond the way you want it to. Instead of moving the buttons around, I might recommend changing them from left/right arrows to just up/down arrows. I would also remove the variables set in the script except for vertical and appendArrows.

[lesliekirk]

Hi Leslie,

The vertical option isn't used very often. You are correct that a lot of CSS updating will be needed to make the default item in Suivant respond the way you want it to. Instead of moving the buttons around, I might recommend changing them from left/right arrows to just up/down arrows. I would also remove the variables set in the script except for vertical and appendArrows.

Well that's why I asked if anyone had any examples. I wouldn't even know where to start on removing stuff or where to change them to up/down arrows (the icon used maybe?).

[lesliekirk]

So what is the correct CSS for the up and down arrows? Obviously this is not it

.related-products .slick-next:before {
                content: "\62";
            }
            .related-products .slick-prev:before {
                content: "\61";
            }

61 seems to be the Home icon and 62 looks to be what's used for the account icon

[Matt Zimmermann]

Hi Leslie,

I believe you would use 21 for up and 22 for down.

[lesliekirk]

Hi Leslie,

I believe you would use 21 for up and 22 for down.

LOL - that gets me an exclamation point and a double quote

[Matt Zimmermann]

Oops...in the declairation right above those classes, change the font-family to ElegantIcons.

.related-products .slick-next:before,
.related-products .slick-prev:before {
    font-family: 'ElegantIcons';
    font-size: 1.50rem;
}

[lesliekirk]

It already is, but in the wrong file - that's got me heading in the right direction now :) Thanks!