Discussion on LayerSlider Responsive jQuery Slider Plugin

1694 comments found

mjyoung Purchased

Hi – I purchased the Layer Slider about a week ago. Great slider!

A feature request: I am using the ‘animateFirstSlide: false’ option because I like the slider to appear immediately when the visitor hits the page the first time. I’m also using the ‘firstSlide: ‘random’’ option. I had to add ‘startInViewport: false’ to get the slide animation to start automatically on the first slide, but It all works great.

HOWEVER, I have a feature request: one of my slides (the fourth one in my slider) is using the ‘showuntil’ option for several layers that appear on top of each other (that is, one layer appears then goes away when the next one appears on top of it). It works great when the slide is animated. BUT, when that particular slide that has the ‘showuntil’ layers is randomly loaded as the first pageload (and, thus, is NOT animated), all of the layers that I had overlayed appear on top of each other but then the layers that have the ‘showuntil’ option do actually disappear from the slide again after a delay.

It would be nice to have an option for the layers that use the ‘showuntil’ that hides them if that slide is loaded without animation. Something like ‘showonnoanimate: false’ or ‘showonstaticslide: false’. The idea is that the user can tell whether layers that are turned off on the animated slide using ‘showuntil’ should show when that same slide is displayed statically such as when ‘animateFirstSlide: false’ is used. For that matter, this option could specify whether any layer is rendered when the containing slide is displayed non-animated.

Does this make sense? Is there a workaround?

We’re prototyping the page, you can see it at: http://www.startdothandwriting.com/blank-page.php

The slide in question is the fourth slide, where the ipads animate and spin on top of each other. If you reload this page several times so that the fourth slide is randomly chosen to render non-animated (might take a few page reloads), you’ll (hopefully) see what I’m talking about. You can see the ‘showuntil’ layers under the iPad there for about 2 seconds, then they disappear.

Thanks!

Mike Young

Default-user
mjyoung Purchased

Or, maybe easier: just add a class to exclude a slide from the random rotation.

Something like class=”ls-slide ls-norandom” would mean that the slide isn’t considered for the random slide load when using firstSlide: ‘random’ to initialize the slider.

kreatura

Hello, Yes I understand and we will think about this feature but you should know that it would be very complicated for us to get this work, so I cannot promise that we can include this feature in the future. I hope you understand and thank you for your kind words.

Hello there, I noted an issue on the wordpress drag and drop menu system (stopped to work and can not move items) if your plugin is activated.

KreaturaSupport

You can send us an email from our CodeCanyon profile page.

Hi I purchased this a week ago or so and absolutely LOVE it! I had my layer transitions working, but when I pulled up the website today, they all of a sudden don’t work.. I don’t believe I changed anything. Instead of doing the offset that is listed, it just fades in (which I’m guessing is the default?)

<section id="slideshow"> <div class="ls-slide" data-ls="slidedelay: 7000; transition2d: 7"> <!-- slide background --> <img src="$ThemeDir/images/banner.png" alt="Banner Title" class="ls-bg" /> <!-- text layers --> <div class="text-wrapper ls-l"> <h3 class="main-title small-underborder ls-l" data-ls="offsetyin: -30; offsetxin: 0; delayin: 50;">Portfolio Category</h3> <h5 class="category-title ls-l" data-ls="offsetxin: 100; offsetyin: 0; delayin: 180;">Children</h5> <a class="btn overlay-btn ls-l" data-ls="offsetxin: 0; offsetyin: -30; delayin: 600;" title="View Photos">View Photos</a> </div> <!-- where the slide links to --> <a href="/portfolio/children" class="ls-link"></a> </div> <div class="ls-slide" data-ls="transition2d: 7; slidedelay: 7000;"> <!-- slide background --> <img src="$ThemeDir/images/banner2.png" alt="Banner Title" class="ls-bg" /> <!-- text layers --> <div class="text-wrapper ls-l"> <h3 class="ls-l main-title small-underborder" data-ls="offsetyin: -30; offsetxin: 0; delayin: 50;">Portfolio Category</h3> <h5 class="ls-l category-title" data-ls="offsetxin: 100; offsetyin: 0; delayin: 180;">Weddings</h5> <a class="btn overlay-btn ls-l" data-ls="offsetxin: 0; offsetyin: -30; delayin: 600;" title="View Photos">View Photos</a> </div> <!-- where the slide links to --> <a href="/portfolio/wedding" class="ls-link"></a> </div> </section><!-- END #SLIDE-SHOW -->

Above is my HTML. I believe I have it spot on. I read over all the examples and the documentation and I can’t see that I missed anything.. I even tried removing the text-wrap div and it still didn’t allow the transitions to go. The slide transition works fine, but the text layers do not. They don’t do the offset in the data-ls attribute. The delay however seems to work..

This is my CSS:

#slideshow { width: 100%; height: 750px; .main-title, .category-title, .btn-area { font-size: 100%; } .text-wrapper { background: rgba(0, 0, 0, .25); display: block; padding: 12px; margin: 0 auto !important; width: 60%; height: 40%; z-index: 25; left: auto; position: relative; top: -50px; } .main-title, .category-title { width: 100%; display: block; text-align: center; text-transform: uppercase; color: #fff; font-family: latoregular; z-index: 200; } .main-title { top: 70px; font-size: 190%; &:after { background: #fff; } } .category-title { top: 180px; font-size: 120%; letter-spacing: 7px; } .btn { top: 230px; left: auto; width: 130px; display: block; margin: 0 auto !important; z-index: 200; position: relative; } }

Thank you for any help/assistance!

kreatura

We are sorry but we need to see the website with the slider to find what causes an issue.

Howdy!

I had a slideshow working just fine. Then it stopped and I can’ tell why exactly. I can edit it but it never really works and shows only the loading animation. Can you give me some hints about what might be the problem?

Thanks

p.s. the site’s address is “http://programa-geodata.com/”

KreaturaSupport

Hello,

I do not see LayerSlider on your site, I believe that loading indicator belongs to another plugin, the Revolution Slider.

Hi

How could I add a pin it button in the sliders ?

Thanks a lot

regards,

KreaturaSupport

Hello,

There is no built-in option to insert the pin it button but you can add content (even from other plugins) with their shortcode and the slider will display the corresponding content.

Hello,

When I use a transparent png with opaque shadow layerslider seems to change the opacity of the image when the transitions fire.

Here is an example http://site2.i-ocom.com/

Have a look at the shadowing below the cars and behind the text during transitions. This behavior is present and identical on all browsers I have tested (ff,chrome,safari,ie9+). It is also present and identical on multiple sites that I am working on.

Any ideas for a workaround or patch?

Default-user

Hello again. I asked my question 5 days ago and have not received a response. Your support page directs me to post support requests here and there is no way to submit a ticket. Can I clarify my question in any way to help you answer?

kreatura

Hello,

I’m really sorry about the late reply.

The problem is that the slider puts the other image in the background, making it briefly visible during the slide transition. It has technical reasons why we’re doing this, and at the moment there’s no workaround for this issue if you’re using transparent images.

We’re planning to change this behaviour in future versions when we find a better method.

Default-user

OK thanks I just wanted to make sure there wasn’t a CSS issue or something.I will keep that in mind when using transparent images with shadows with this plugin

I need help with the slider at http://m4makeup.ctdev.org/#intro-hn. There are a couple of problems here. The slider should have 3 text displays. It is only showing 2. The third text slider was visible until we added some more text to it and then it disappeared. Also, in order to make the slider visible we are using a shortcode that is not what the slider says it should be. For some reason that is the only slider ID that will show any content. I deactivated all the other plugins and also tried deactivating the slider plugin and reactivating it.

Default-user
Here is the code from one of the slides that is working
[coll_text type="03" min_font_size="35" color="#ffffff"]<b>Customized</b> Beauty Services[/coll_text]
Default-user

I found support somewhere else so you can close this now.

KreaturaSupport

Thanks for the feedback.

Hello there,

awesome plugin. But i´m stuck at a very simple problem. I have 2 slides with different layers. When on my first slide the last layer has faded to the final place it immediately switches over to the next slide. This way no one can read the content on my last layer.

is there a way to “pause” the slide for a specific time?

KreaturaSupport

Hello,

You can set a longer time for the slides with ‘slidedelay’ so the visitors can see the last layer as well.

Default-user

Doh! Couldn´t see the forest out of trees. Thanks!

Hi

i have the rotator working but i have an issue with video, i have set the timer so it doesn’t change the slide until the video has finished, but if you click the next slide the video is still playing in the background, i think i read somewhere you had included listeners but cannot find anywhere details on how to implement.

cheers Sheldon

Default-user

Hi guys

your first reply was lightning fast and now nothing? sorry to be a pain but i need to go live today with this

cheers s

KreaturaSupport

We were able to reproduce this. It seems like this only happens if you start the video with the play button. We will look into this and fix it in the next release. Sorry for your inconveniences.

Default-user

cool

Hi, Can you give example of how to open pop up video on slide click?

Thanks, Z

kreatura

Hi,

The below example shows how you can set up a click event, but we can’t help you on how to open a popup video, as it requires custom coding.

jQuery('.ls-slide').click(function() {
    // Custom code to open video popup
});
morassut Purchased

I have a youtube video autoplaying but there seems to be a few second delay after the video stops before moving to the next slide. I tried slidedelay and timeshift in the data-ls but I don’t notice anything changing. Is there a way to remove the delay after a video auto plays?

KreaturaSupport

Hello,

The slide does not change immediately when the video is over, there is a ~1 second delay. If this delay is considerably more please show us your site where we can see this.

Default-user
morassut Purchased

It’s about 4 seconds. http://wackywings.ca/?preview=1 the third slider (only one with video).

kreatura

Please try to lower the slide duration value that is currently set to 4000ms. A value around 500ms would eliminate this effect, since the slideshow is paused during the video playback and this value is added to the overall time on the slide.

Pacotero Purchased

Hello: I need to put 2 layersliders (not multiple sliders in on layerslider) in different parts of my web page. I just do not know how to differentiate the name of the layerslider as well as it corresponding jquery script considering that each layerslider is different in size and functions. (I looked throughout your comments and found one from 3 years ago, it says that we could use the multislider explanation in the documentation, but this explanation only tells me that I can add multi-sliders not multi layersliders). Below I am including only the headings of the html code and the 2 full jQuery scripts I put in the webpage. Any support will be appreciated Note: with the below code I can only make one layerslider work, not both. Note: I named the second layerslider as follows <!- slide one start -> ……..

<!- SECOND FULLWITH LAYER-SLIDER -> ……….. BELOW THE PAGE I PUT THE 2 JjQuery scripts:

<!- FIRST SLIDER Initializing the slider -> <script> jQuery(”#layerslider”).layerSlider({ pauseOnHover: false, navPrevNext:true, showBarTimer:true, showCircleTimer:false, skinsPath: ‘layerslider/skins/’ }); </script>

<!- SECOND FULLWITH SLIDER Initializing the slider -> <script> jQuery(”#layerslider(2)”).layerSlider({ responsive: false, responsiveUnder: 1280, layersContainer: 1280, skin: ‘noskin’, hoverPrevNext: false, skinsPath: ‘layerslider/skins/’ }); </script>
Default-user
Pacotero Purchased

solved, thanks, GREAT SLIDER

KreaturaSupport

Thank you for the feedback.

HI,

IT IS A VERY GOOD SLIDER, CAN I MAKE IT LIKE THIS:

http://www.webdirectors.co.uk/

THANKS

KreaturaSupport

I have replied to your other comment.

Having a problem with Vimeo, but not the preview image thing. I can successfully play vimeo clips from their site (and the demo links you provide) but when I try to link specifically to my client’s vimeo clips they won’t load/play. Have you run across this before?

by
by
by
by
by
by