Canvas Support

Add loader animation on owl carousel images

5 replies · opened Feb 7, 2021

Nnitto75Feb 7, 2021

Hi,
Is it possible add a loader anomation for owl-carousel loading images?

On plugins.carousel.js there is:

onInitialized: function(){
				SEMICOLON.slider.sliderDimensions({ 'parent': element.parents('.slider-element') });
				SEMICOLON.initialize.lightbox({ 'parent': element });
				SEMICOLON.widget.hoverAnimation({ 'parent': element });
				SEMICOLON.widget.loadFlexSlider({ 'parent': element });
				SEMICOLON.widget.counter({ 'parent': element });
				SEMICOLON.widget.progress({ 'parent': element });
				SEMICOLON.initialize.resizeVideos();
				if( element.find('.owl-dot').length > 0 ) {
					element.addClass('with-carousel-dots');
				}
			}

but I don't know if there are options for doing this.
How are these options (progress, lightbox..) used?

Thanks.
B.

SSemicolon WebSTAFFFeb 8, 2021

Hello,

Unfortunately, this is currently not supported out of the box and will require moderate customizations. You can consider using this Documentation: http://docs.semicolonweb.com/docs/shortcodes/lazy-loading/ to add Lazy Loading to the Images inside the Carousel and then use the following CSS Code to add a Loading GIF:

img.lazy:not([src]) {
	opacity: 1;
	visibility: visible;
	background-image: url('your-loader.gif');
}

You might need to set a fixed height for the Images above for the Loader to appear correctly.

The Functions used inside the onInitialized event is only called when there is a relevant Element inside the Carousel, else the function do not run.

Hope this Helps!

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

Nnitto75Feb 9, 2021

Ok, Thanks.
Can I use a loading image from Canvas Template Transitions?

B.

SSemicolon WebSTAFFFeb 9, 2021

Hello,

Unfortunately, this is not supported since they run on HTML/CSS and currently cannot be placed in place of an image out of the box. You will need to deep customize this to make this work.

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

Nnitto75Feb 10, 2021

Ok,
If I can I would like to ask for help. I don't understand why the cars are loaded after the page is loaded, this way the combo transmission is moved.

https://duobooking.it/fleet

Why?

B.

SSemicolon WebSTAFFFeb 10, 2021

Hello,

Owl Carousel is loaded only on Window Load to properly calculate the Image/Window Sizes and then position them. According to your Codes, you can slightly modify the Codes to use this:

<div class="col-12 col-lg-10">
	<div class="owl-carousel owl-lazy image-carousel carousel-widget" data-margin="30" data-nav="true" data-pagi="false" data-start="0" data-items-xs="1" data-items-sm="2" data-items-md="4" data-items-lg="6" data-items-xl="6">
		...
	</div>
</div>

This should fix the issue with the jump. 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