Canvas Support

Filter Carousel like Portfolio

7 replies · opened Nov 19, 2023

PPierrafeeNov 19, 2023

Hello,

I try to tweak filter from Portfolio to use with each row of carousel item.
Do you have an idea how i can do that?

Thank you :)

SSemicolon WebSTAFFNov 21, 2023

Hello,

Currently, Portfolio Filters and Carousels are not compatible with each other. We would instead recommend you to use Tabs: https://canvastemplate.com/tabs.html . For Each Category of Carousels, you will need to use a separate Tab.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PPierrafeeNov 21, 2023

Thanks for your answer.
Is it possible for one category to be on 2 differents tab without duplicate two times the code? Like Tab Show All + Tab Filter1 ?

SSemicolon WebSTAFFNov 21, 2023

Hello,

Unfortunately, this is not supported currently. As for different Tabs, you have to have different Carousels, so yes there will be duplicate carousel items if you have 2 Tabs consisting of the common Carousel Item.

Unfortunately, this feature is currently not available within the Default Templates. We will surely consider adding this in Our Future Updates and will send you a Notification once this is available.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PPierrafeeNov 26, 2023

Thank you.
How can I change the position of the arrow? I'd like to put the arrow lower and maybe a bit inside.

Thanks

SSemicolon WebSTAFFNov 27, 2023

Hello,

Consider using the following CSS in the css/custom.css File:
[ch_pre type="css"].owl-carousel .owl-nav .owl-prev {
left: 30px;
}

.owl-carousel .owl-nav .owl-next {
left: auto;
right: 30px;
}[/ch_pre]

You can change the Left/Right values according to your needs. Additionally, you can set margin-top CSS Properties to move the Arrows Up or Down. This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PPierrafeeNov 27, 2023

Right and Left have an effect only on the animation of the arrow.
Margin-top have no effect :(

thanks.

SSemicolon WebSTAFFNov 27, 2023

Hello,

Consider trying this code:
[ch_pre type="css"].owl-carousel .owl-nav [class*=owl-] {
opacity: 1;
margin-top: 40% !important;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel:hover .owl-nav .owl-prev {
left: 30px;
}

.owl-carousel .owl-nav .owl-next,
.owl-carousel:hover .owl-nav .owl-next {
left: auto;
right: 30px;
}[/ch_pre]

These are the standard CSS Codes for Customizing the position of the Arrows. We Apologize for the Inconveniences, however, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire a Freelancer to help you out. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard