Arreane

Hi,

Sorry I’m not familiar with flashcards. Can you provide a link on which plugin you’re referring to.

Hi,

Sorry, I’m not familiar with Image Map HotSpot plugin. I tried to search for the plugin to try and test it on my server but I wasn’t able to do so since it’s a paid plugin.

Are you trying to integrate Image Map HotSpot with MetaSlider?

I checked the link provided and your slider seems to work fine on my end. I made a short recording of my experience – https://share.getcloudapp.com/L1uBdlY8

Can you provide more information on how it should supposed to work?

Hi,

Thank you for your reply.

It’s clear that the SiteGround’s js minification is what’s causing the issue.

I’ve made a short recording to show you the error that is produced when running through the slide – https://share.getcloudapp.com/7Kuo81d5

You can try disabling the JS minification in your SiteGround settings and hope it works.

• This reply was modified 4 years, 11 months ago by Arreane.

Hi,

I checked your site and there seems to be an issue with your siteground-optimizer plugin. It’s possible that the error is preventing MetaSlider from running. You can try to fix the the issue or disable the plugin.

Let me know if that works for you.

Kind regards,
Arreane

Hi,

Thanks for clarifying. You can try reducing your slider’s width from 2000 to 1920.

Let us know if that works for you.

Cheers,
Arreane

Hi,

I checked your site and it doesn’t seem to have the black arrow anymore. I also noticed that you have set the status to resolved already. I’m assuming that the issue has been fixed.

Hi,

Thank you for liking our plugin. What you’re asking is not possible with MetaSlider right out of the box but MetaSlider has hooks available to make such custom changes.

However, you may need some extra coding in order for you to achieve what you want. https://www.metaslider.com/metaslider_type_slider_javascript/

I’ve made a custom code that would work similar on what you want, but you still have to make some changes to update the code to work on your end. I’ve added some comments on what you need to change. You just have to put this on your theme’s function.php file.

function metaslider_random_images($attributes, $slide, $slider_id) {
	// change 123 to your slider id
	// and change 234 to your first slide's id
	if (($slider_id == 123) && ($slide['id']==234)) {
		$images = array(
			'image url here',
			'image url here',
			'image url here',
		);
		$attributes['src'] = $images[rand(0,2)];
	}
	return $attributes;
}

// use this filter if you're using flex slider
add_filter('metaslider_flex_slider_image_attributes', 'metaslider_random_images', 10, 3);

// use this filter if you're using r.slides
add_filter('metaslider_responsive_slider_image_attributes', 'metaslider_random_images', 10, 3);

Hope this helps!

• This reply was modified 4 years, 11 months ago by Arreane.

Hi,

Yes, that would be possible. I’ve made a custom CSS code for you. I believe this is what you want to achieve. You can try and copy the following code below and paste it in your css file:

#metaslider_570 .slides .ms-image { background: transparent none no-repeat center center / cover scroll }
#metaslider_570 .slides .slide-571 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/SoyDonanteObsequios.jpeg); }
#metaslider_570 .slides .slide-572 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/FurgonDeLado.jpeg); }
#metaslider_570 .slides .slide-573 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/03/Galeria20.jpeg); }
#metaslider_570 .slides .slide-574 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpeg); }
#metaslider_570 .slides img {
opacity: 0;
pointer-events: none;
}

Hope this helps, let us know if you need anything else.

Cheers,
Arreane