At the moment LayerSlider does not support a feature like this out of the box. If you have web development experience and aren't afraid of custom coding you can use the LayerSlider API. It allows you to perform common tasks like jumping to a specified slide. LayerSlider is built on standard web technologies, so you can freely use custom CSS or JavaScript code like you would do with any other element on your site.
For reference, here's a quick example. You can also find more examples and details on how to use the API on the linked site.
$( document ).on( 'mouseenter', '#myLayer', function() {
// This will jump to the second slide
$( '#mySlider' ).layerSlider( 2 );
// This will commence to the next slide
$( '#mySlider' ).layerSlider( 'next' );
});
I'm really trying hard to figure this out. Is it possible you can send me a demo of an example of this . Or maby you can explain from this code snippet from the eCommerce-Global-Hover-Example so here is the code for the left and write click arrow.
Now here is the jquery code snippet you gave me to enable a click by hovering
$( document ).on( 'mouseenter', '#myLayer', function() {
// This will jump to the second slide
$( '#mySlider' ).layerSlider( 2 );
// This will commence to the next slide
$( '#mySlider' ).layerSlider( 'next' );
});
I have tried to plug in some values with no luck. Can you show me what values from this example to make this work. I will give you the code from the whole slide just in case this example requires more code than above
Sorry about that, Ticksy didn't show your previous message from some reason.
My example code uses the myLayer ID. It can be changed to anything as long as it's a valid ID name. You should apply this ID to the element, which should register the hover event.
Also, the $( '#mySlider' ).layerSlider lines should be changed to target your slider with its own ID name. The mySlider ID is just there for example. And there's no need to use both of these lines. The LayerSlider API offers different functions and these two are there for demonstration only.
The pasted code from the eCommerce Global Hover template uses a feature called Smart Links. Basically, if you link a layer and enter #prev or #next (among others) for the href attribute, the slider will automatically execute the pre-defined function assigned to them when those layers are clicked. However, these are only working with the click events.
Hello,
Hope your doing well. How can I change a slide but hovering over the link rather than clicking on it?
Hello,
At the moment LayerSlider does not support a feature like this out of the box. If you have web development experience and aren't afraid of custom coding you can use the LayerSlider API. It allows you to perform common tasks like jumping to a specified slide. LayerSlider is built on standard web technologies, so you can freely use custom CSS or JavaScript code like you would do with any other element on your site.
For reference, here's a quick example. You can also find more examples and details on how to use the API on the linked site.
$( document ).on( 'mouseenter', '#myLayer', function() { // This will jump to the second slide $( '#mySlider' ).layerSlider( 2 ); // This will commence to the next slide $( '#mySlider' ).layerSlider( 'next' ); });Best Regards,
John | Kreatura Dev Team
John,
I'm really trying hard to figure this out. Is it possible you can send me a demo of an example of this . Or maby you can explain from this code snippet from the eCommerce-Global-Hover-Example so here is the code for the left and write click arrow.
<a class="ls-l" href="#next" target="_self" data-ls="showinfo:1; offsetxin:50; static:forever;"> <span class=""> <i class="fa fa-arrow-circle-right"></i></span> </a> <a class="ls-l" href="#prev" target="_self" data-ls="showinfo:1; offsetxin:-50; static:forever;"> <span class=""> <i class="fa fa-arrow-circle-left"></i></span> </a>Now here is the jquery code snippet you gave me to enable a click by hovering
$( document ).on( 'mouseenter', '#myLayer', function() { // This will jump to the second slide $( '#mySlider' ).layerSlider( 2 ); // This will commence to the next slide $( '#mySlider' ).layerSlider( 'next' ); });I have tried to plug in some values with no luck. Can you show me what values from this example to make this work. I will give you the code from the whole slide just in case this example requires more code than above
kind regards,
alex
<!-- Slide 1--> <div class="ls-slide" data-ls="bgcolor:#ffffff; duration:5000; globalhover:true; kenburnsscale:1.2;"> <img width="1000" height="1000" src="images/HL4D2_AV2-compr.png" class="ls-l" alt="" style="top:140px; left:50%; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; mix-blend-mode:normal; width:400px;" data-ls="showinfo:1; hover:true; hoveroffsety:-120; hoverscalex:0.8; hoverscaley:0.8; hoveralwaysontop:false;"> <p style="top:53px; left:50%; text-align:center; font-weight:700; font-style:normal; text-decoration:none; mix-blend-mode:normal; font-family:Montserrat; font-size:22px; width:350px; line-height:26px; color:#333333; white-space:normal;" class="ls-l" data-ls="showinfo:1; hover:true; hoveroffsety:-100 ; hoverbgcolor: ;">Bose® SoundLink® Revolve</p> <p style="top:78px; left:50%; text-align:center; font-weight:400; font-style:normal; text-decoration:none; mix-blend-mode:normal; font-family:Montserrat; font-size:18px; width:300px; line-height:26px; color:#7a7a7a; white-space:normal;" class="ls-l" data-ls="showinfo:1; hover:true; hoveroffsety:-100 ; hoverbgcolor: ;">Bluetooth Speaker</p> <a class="ls-l" href="#" target="_self" data-ls="showinfo:1; hover:true; hoveropacity:1; hoverscalex:0.78; hoverscaley:0.78;"> <p style="top:50%; left:50%; text-align:initial; font-weight:700; font-style:normal; text-decoration:none; opacity:0; mix-blend-mode:normal; background:#fbc91c; font-family:Montserrat; font-size:20px; line-height:52px; padding-right:40px; padding-left:40px; border-radius:36px; color:#ffffff;" class="">SHOP NOW </p> </a> <p style="top:47px; left:318px; text-align:center; font-weight:700; font-style:normal; text-decoration:none; opacity:0; mix-blend-mode:normal; background:#f5e613; font-family:Montserrat; font-size:30px; line-height:90px; padding-right:0px; padding-left:0px; border-radius:50%; width:90px; color:#404040;" class="ls-l" data-ls="showinfo:1; hover:true; hoveroffsetx:-100; hoveropacity:1; hoverrotate:30;">$99</p> <a class="ls-l" href="#next" target="_self" data-ls="showinfo:1; offsetxin:50; static:forever;"> <span class=""> <i class="fa fa-arrow-circle-right"></i></span> </a> <a class="ls-l" href="#prev" target="_self" data-ls="showinfo:1; offsetxin:-50; static:forever;"> <span class=""> <i class="fa fa-arrow-circle-left"></i></span> </a> </div>Can you please reply thank you much appreciated
Hi Alex,
Sorry about that, Ticksy didn't show your previous message from some reason.
My example code uses the myLayer ID. It can be changed to anything as long as it's a valid ID name. You should apply this ID to the element, which should register the hover event.
Also, the $( '#mySlider' ).layerSlider lines should be changed to target your slider with its own ID name. The mySlider ID is just there for example. And there's no need to use both of these lines. The LayerSlider API offers different functions and these two are there for demonstration only.
The pasted code from the eCommerce Global Hover template uses a feature called Smart Links. Basically, if you link a layer and enter #prev or #next (among others) for the href attribute, the slider will automatically execute the pre-defined function assigned to them when those layers are clicked. However, these are only working with the click events.
Best Regards,
John | Kreatura Dev Team