Slide speed and click event listener

[mehdiagharlou]

trafficstars

Hello

I have a license of your slider and have some issues in options and events.

In options how can I set slide speed? something like speed : 500 //ms

And in event listeners, I set an event for click on elements, I want to slide to clicked element but it's not working. Actually click event does not fire on elements because slider wrapper covered all elements on top of them and click target won't fire on any element.

For more details, while I try to inspect on any element even in demo page : Demo wrapper of slider will select instead of element.

How could I fix this issues?

Thanks

[lukeed]

Hey~!

For clicks, there's a listeners.clicks option, but it's not super reliable. Sometime it "hears" the wrong slide, see #1. You may also need to set a higher z-index (via CSS) on the slides so that they're positioned on top of the parent wrapper.

For the slide speed, you have to update the transition duration found within src/styles/_basic.sass. Right now it's a 700ms duration, via this line:

  +transition(opacity .7s ease, transform .7s ease)

[mehdiagharlou]

Thanks for quick response.

Speed of slides have solved based on your guidance, many thanks.

About click, I have tested higher z-index on elements but still not working. Maybe I should wait for bug fix.

[lukeed]

Can you show me the code you're trying? I'm only guessing at what the problem is based on your description.

[mehdiagharlou]

@lukeed Yes sure,

Here is website contains bee3D slide: AraratDokhan

And the javascript code is:

		var homeSlider = document.getElementById('homeSlider');
		var slider = new Bee3D(homeSlider, {
		  effect: 'coverflow',
		  listeners: {
		      keys: true,
		      touches: true
		  },
		  navigation: {
		  	  enabled: true,
		  	  next: 'bee3D--nav__next',
		  	  prev: 'bee3D--nav__prev'
		  },
		  loop: {
		  	  enabled: true,
		  	  continuous: true
		  },
		  listeners: {
		    keys: true,
		    touches: true,
		    drag: true,
		  },
		});
		slider.el.on('click', function(event){
			event.slide;
			console.log(event.index);
		});