Plugin Support
Laszlo
(@laszloszalvak)
Hi @thorak01
When you are working with slide background images, then those will always appear behind the layers.
But when you have multiple layers in a slide of the slider, then the z-index of a layer can be changed by ordering the layers in the layer list. The closer the layer to the top, the higher its z-index. Here you can see how you can change the order: https://smartslider3.helpscoutdocs.com/article/1265-layers-changing-the-z-index.
Also please note that we need to hide anything that overflows the slider’s area. So if your goal is to creating such purple overlay that currently now appears on your site, then I am sorry, that is not possible. Since the layer won’t be able to go outside of the slider’s area.
As for making layers be able to overlap each other:
We have 2 editing mode:
-Canvas: https://smartslider3.helpscoutdocs.com/article/1479-how-can-i-move-my-layers-freely-on-the-canvas
-and Content mode: https://smartslider3.helpscoutdocs.com/article/1430-tutorial-video-content-mode
In Content mode – what you are using now in your slider -, you need to work with blocks similarly to page builder. It allows you to build your slides with great responsive behavior, however you can not position the layers freely.
In Canvas mode you can place the layers anywhere on the Canvas and they can Overlap each other, however it needs much more adjustments to make the results look good on all views.
Here you can find more about the differences: https://smartslider3.helpscoutdocs.com/article/1522-canvas-vs-content-mode
So you should add the white shape in Canvas mode instead. Then make sure it has a lower z-index then the layers added in Content mode.
Best regards,
Laszlo.
Laszlo,
Thank you for such a prompt reply. That makes a lot of sense. Though it would be a nice feature to have the slider start at an index something like 100 and increment in 10’s. Then I would be able to overlay an element and use an in between index that would then position my content within the stack at something like 135. This is something I do often even when building indexed arrays so that I can manipulate the indices with greater speed and accuracy than having to merge or loop. Or when setting values for upper and lower limits, I do the same thing to allow room for expansion. Just a suggestion that I think would be a nice feature. But as it seems I’m able to get the results I need with the method you describe, not a high priority and probably more of an edge case.
Thank you again for a great piece of software and excellent support even for the free version. I look forward to utilizing this slider in future projects and hopefully get your pro version and get more creative. Cheers!
I’ll implement your suggestion now and return to resolve the ticket.
-Tom
Plugin Support
Laszlo
(@laszloszalvak)
Hi @thorak01
Actually we are already working on a big update for Smart Slider 3, where there will be some z-index related improvements as well!
Currently I can not tell anything concrete about the feature, yet but I think you will like the new z-index handling very much!
Once the open beta starts, you will be able to experience it yourself! 🙂
If you are interested in a short sneak peak for this update, please check our blog post here:
https://smartslider3.com/blog/smart-slider-34/
Anyway I am glad I could help!
Best regards,
Laszlo.
That’s great to hear. I’m still not quite getting this overlay layer quite right. I used an image object (block) in the canvas and set just the class to slide-overlay. In the second slide you can see the z-index is working now it’s at 2 but it looks like it’s not able to go any further left. The other slides are not showing that image for some reason. I can force it left: -555px but it should be able to reach the left without a work around now right?
Plugin Support
Laszlo
(@laszloszalvak)
Hi @thorak01
As I see you have some settings which are limiting the size of the slider. This will also limit the size of the layer container according to the original width/height ratio. This means that your layers won’t be able to reach the sides of the slider.
Here you can see the exact behavior with some graphics:
https://smartslider3.helpscoutdocs.com/article/1490-why-arent-my-layers-reaching-the-side-of-the-slide
So to make your layers be able to reach the sides of the slider, you should go to Slider Settings > Size tab:
https://smartslider3.helpscoutdocs.com/article/399-responsive-mode-fullwidth
and change the Slider height back to the default values, so Min=0, Max=3000
What you need to know about the sizing of the slider on the frontend is that, it is scaled up or down according to the Width-Height ratio that you set at Slider Settings > Size tab > Slider size > Width and Height.
As for an example:
If you slider size is the following: width=1200 and height=600 then your slider will be 1200px wide and 600px hide on an 1200px wide screen.
But on an 1920px wide screen it will be scaled up to: 1920px*960px
( 600/1200*1920=960 )
So if you want your slider not to be that high, you should reduce the Height. So your slider will scaled with a different ratio.
