Xtemos image gallery

Hi,

We want to replace Slider revolution with static images full width.

Please confirm that Xtemos image gallery is the best to improve load time carousel of static images on homepage.

I have tried to fit full width images of 1600*600 but I couldn’t.

Here is the use of XTemos image gallery: https://staging.dermastore.ch/it/

Admin Login:
staging
siteG2_23_63

Please try to fit the image carousel like the revolution slider.

Thank you very much in advance.

Kind regards

Hi,

If you want to use our theme gallery images slider full width you need to set the row containing the slider to “Stretch row and content”.

Regards

Please answer my question.

Is this the high performance method to see full with image carousel in homepage.

Tried stretch row and content but it shows different, attached screenshot.

regards

Attachments:

You must be logged in to view attached files.

What do you mean by the high-performance method? Do you mean comparing to Revolution slider? Yes, it would be faster.

You screenshot has 1900px width and your image is 1600px. You need to increase the image to make it fit the screen.

Yes faster if there is any other image carousel.

Please let me know the right size width to fit full width like revolution slider.

I tried 1900 but it doesn’t fit full width . There is a space on the left and right.

also the top is not fit.

Please let me know or try to fit on staging

Try to use the following code snippet to force all images in the slider full width

.basel-images-gallery .owl-item img {
	width:100%!important;
}

Regards

There was a slight padding that is solved by setting “Stretch row and content (no paddings), but the arrows are outside

We also have to fix the top because the carousel is not on top just under menu

Please let me also know how to use the autoplay for image gallery

Here is a code snippet to show the arrows

.basel-images-gallery .owl-carousel .owl-nav .owl-prev,
.basel-images-gallery .owl-carousel .owl-nav .owl-next {
	opacity: 1;
}
.basel-images-gallery .owl-carousel .owl-nav .owl-prev,
.basel-images-gallery .owl-carousel:hover .owl-nav .owl-prev {
	left: 0px;
}

.basel-images-gallery .owl-carousel .owl-nav .owl-next,
.basel-images-gallery .owl-carousel:hover .owl-nav .owl-next {
	right: 0px;
}

To make it autoplay you need to modify function basel_images_gallery_shortcode in the file inc/shortcodes.php. Add the following code

$parsed_atts['autoplay'] = true;
$parsed_atts['speed'] = 10000;

after this line

$parsed_atts['carousel_id'] = $carousel_id;

Regards

Thank you, how to fix the top please?

You can compensate this gap adding a negative margin top for the row containing the gallery.

Tried autoplay but on mouseover should be blocked

please let me know how to block on mouse over

Sorry, but it is not possible to block autoplay on mouse over with this JS library.

Is there any option ?

other carousels?

There are no other carousels except our Images Gallery and Revolution Slider.

Regards

Hi,

Sorry but there is any carousel of Visual Composer?

REgards

Hi,

You can see all available elements that come with Visual Composer when you add them to the page. There is only “Images carousel” element but we are not sure if it has all the features to fit your needs.

Kind Regards

Yes I see… but are you sure that your Xtemos image gallery load faster than Visual composer image carousel?

We are sure that our gallery loads faster then Revolution slider. But we don’t know about the Visual composer one. They may be approximately the same.

Visual composer also use image gallery not only images carousel

Anyway, I see on mobile that the arrow are on squared white background.
Please let me know if we can have the same arrows like on desktop.

regards

Sorry, what do you mean about visual composer gallery?

Use this code for mobile devices to fix arrows background

.owl-carousel .owl-nav>div {
	background:none!important;
	box-shadow: 0 0 0 rgba(0,0,0,0)!important;
}

Regards

> ???

Hello,

Can you clarify your question?

Kind Regards
XTemos Studio

no you copied on email .owl-carousel .owl-nav>div instead >

Be sure that you have copied this code

.owl-carousel .owl-nav>div {
	background:none!important;
	box-shadow: 0 0 0 rgba(0,0,0,0)!important;
}

Hi,

Please change the autoplay option in your next version, in order that we dont’ have to change shortcode.php everytime:
$parsed_atts[‘autoplay’] = true;
$parsed_atts[‘speed’] = 10000;

Hi,

OK, we will consider adding some option for this in the next version.

Regards

Hi,

I hope this finds you well.

I just write to know if you could add a carousel option on autoplay, in order to stop autoplay once clicked on the pagination control marks (very useful for testimonials with long text).

Kind regards

[Author]

Posts