[Resolved] Carousel using View block

[Author]

Posts

[nadavL]

Hi,
I've created a new Carousel using View block. No matter what I do, I can't limit the view width.
I tried limiting the page width, putting the view inside a Container block with limited width, and nothing works.

Other views on the page work great.

Please see more details in this video capture: (sorry it's so slow. That's how this page works in the backend and what I'm trying to work on):
hidden link

Thanks,
Nadav

[Shane]

Hi Nadav,

Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Nadav,

I was able to achieve this by using our Toolset default container block. You can see it at the bottom of this page.

hidden link

What I did was to adjust the inner content max width as you can see from my screenshot.

This then adjust the width of the view.

Thanks,
Shane

[nadavL]

My issue is resolved now. Thank you!

[nadavL]

Hi,
Could you please advise on the CSS I need to set in the View to change the Pagination circles' size, color, and border color?

Also, is it possible to add arrows at the carousel left and right?

Thanks

[Minesh]

Shane is on holiday today. He will get in touch with you tomorrow.

[Shane]

Hi Nadav,

Here is the css.

For the Pagination circle color when selected

.pagination-dots .active-dot a{
    background-color: blue;
}

For the circle size and border color

pagination-dots>li>a.page-link {
   
    width: 20px;
    height: 20px;
    border-color: green;
}

Please let me know if this helps.
Thanks,
Shane

[nadavL]

Hi Shane,

Works perfectly! Thank you.

Regarding my last question, is it possible to add arrows on the carousel's left and right sides or will it require too much work?

Thanks

[Shane]

Hi Nadav,

Happy I was able to assist you.

Regarding the navigation arrows it will take quite some amount of custom coding to achieve this so it wouldn't be something that can be done easily.

Thanks,
Shane

[nadavL]

Sorry to get back on the same issue. Now I have a question regarding mobile view.

Currently, I display 3 columns and on the desktop, it looks great. On mobile, the columns collapse, and users basically switch pages and miss items 2 and 3 on each page.

Can I set the carousel to show 1 item on mobile and 3 on desktop?

Thanks

[Shane]

Hi Nadav,

Given that this is a view you will need to create a separate identical view and add it to a container block. Then set that container block's visibility to be hidden on Desktops and for you current container block to only show on desktops. See Screenshot

This option allows you to toggle on which device should the container block and its content be visible on.

The view for your mobile devices should be configured exactly how you want it with 1 item per page.

Thanks,
Shane

[nadavL]

I created a new View for mobile as you suggested. The pagination is getting out of the container/view limits (see attached screenshot).
Since there are no arrows, is there an option to drop a line in case there are many items (which cause this issue)?

Thanks

[Shane]

Hi Nadav,

My suggestion here is that you may need to change the pagination style or add a custom class to the pagination section and style it differently from how you're styling the main desktop view.

There is a navigation arrow option but this doesn't appear on the side of the slider but rather at the top or bottom based on where you place the pagination.

Thanks,
Shane

[nadavL]

Thank you Shane. I'll try to play around with your suggestion.

I tried closing the ticket but I wasn't able to. Please mark this as resolved 🙂

[Shane]

Hi Nadav,

Thanks for the update. Closing here.