Hi I've been using layerslider for years and it has worked flawlessly. I updated to the latest version and our main slider works fine. But a very simple secondary slider I'm using as a text rotator is not working. What seems to happen when the script executes the div containing the content that layerslider uses:
(also isn't it weird that the one class is "ls-wp-container" I'm using the jquery version - not the Wordpress version)
Gets rendered just below the body tag outside of the actual slider div. All of the other slider elements and controls get rendered within the slider div.
I've tried everything I can think of and I can't fix this issue.
Here is the slider div:
<div id="sitewide_message"> <div id="slider-wrapper"><div id="sitewide-slider" style="width: 100%; height:30px;"><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>Our service window has re-opened for pick-up and returns</p></div><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>Winter term course materials are now final sale.</p></div><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>FREE shipping in Canada for online purchases over $75 (before tax) - Hospitality basket and group custom orders excluded.</p></div></div></div> </div>
Hi
I've been using layerslider for years and it has worked flawlessly. I updated to the latest version and our main slider works fine. But a very simple secondary slider I'm using as a text rotator is not working. What seems to happen when the script executes the div containing the content that layerslider uses:
<div class="ls-wp-container fitvidsignore ls-hidden ls-noskin ls-container ls-responsive" data-layerslider-uid="LSgwgsdv6c4">...</div>
(also isn't it weird that the one class is "ls-wp-container" I'm using the jquery version - not the Wordpress version)
Gets rendered just below the body tag outside of the actual slider div. All of the other slider elements and controls get rendered within the slider div.
I've tried everything I can think of and I can't fix this issue.
Here is the slider div:
<div id="sitewide_message">
<div id="slider-wrapper"><div id="sitewide-slider" style="width: 100%; height:30px;"><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>Our service window has re-opened for pick-up and returns</p></div><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>Winter term course materials are now final sale.</p></div><div class="ls-slide" data-ls="duration:6000;transition2d:2;"><p>FREE shipping in Canada for online purchases over $75 (before tax) - Hospitality basket and group custom orders excluded.</p></div></div></div>
</div>
Here is the trigger code found in app.js:
$(document).ready(function() {
$('#sitewide-slider').layerSlider({
pauseOnHover: false,
skinsPath: '/layerslider/skins/',
skin: 'noskin',
showCircleTimer: false,
});
)};
I probably did something dumb. Please help.
Thanks
Dennis
I knew it was dumb!!!
I forgot to add a layer class to the content of the slides. Once I added class="ls-l" to the <p> tags all worked well.
Hello,
Thank you for your feedback!
I'm glad that you have managed to solve this issue.
If you have any other question, feel free to ask.
Best Regards,
Andrea | Kreatura Support Team