Canvas Support

Change and customize carousel

3 replies·opened Jun 4, 2019
E
EnriqueJun 4, 2019

Hi
I'm working with Canvas Corporate 2 layout

I'm also using a carousel in the same page (images carousel)
http://themes.semicolonweb.com/html/canvas/carousel.html

  1. How can I set custom arrows for navigation ?

  2. How can I make this custom left/right arrows to show permanently and not on Carousel's on:hover ?

  3. Finally, which classes or id's shouldn't be used to make a separate carousel from functions.js ?

Thanks

S
SemiColonWebSTAFFJun 5, 2019

Hello,

  1. It is recommended to use the following jQuery Code if you are planning to use the Default js/function.js File Carousel functionality:
jQuery(window).on('load', function(){
	jQuery('.carousel-widget').find('.owl-nav i').removeClass('icon-angle-left').addClass('your-custom-icon');
	jQuery('.carousel-widget').find('.owl-nav i').removeClass('icon-angle-right').addClass('your-custom-icon');
});
  1. You can simply use the following CSS Code:
.owl-carousel .owl-nav [class*=owl-] { opacity: 1 !important; }
  1. You can use all the default classes or ids. Simply adding the .customjs Class to the .carousel-widget Element will disable the js/function.js File's default functionality and allow you to use your own Customizations.

Hope this Helps!

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

E
EnriqueJun 6, 2019

Hi

Thanks for such useful reply. Lemme ask the last question about this

Is there a way to set the fixed (or max) width for each item in the carousel ?

Thanks again

S
SemiColonWebSTAFFJun 10, 2019

Hello,

This is Definitely Possible! You can simply set the style="width:250px" Attribute on the .oc-item Element. Example: 

<div class="oc-item" style="width:250px;">
	<a href="#"><img src="images/portfolio/4/4-1.jpg" alt="Image 1"></a>
</div>

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.

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