Support » Plugin: Smart Slider 3 » Problem with z-index

  • Resolved thorak01

    (@thorak01)


    First thing first,
    This slider is fantastic! I just stumbled on it yesterday and so far really like how intuitive it is and jam packed with features!!

    I’m having a problem trying to get a semi-transparent shape to be in between layers of the slide. I need it above the background image, but under the overlay text. I tried using an image layer but it’s contained within the slider div and I would have to constantly calculate the position and size in order to maintain shape. If I could just set the z-index that would be ideal. I have also tried to set the z-index of the containers above it in the stack but it seems that all the layers end up with z-index:auto. Right now that page shows the div in purple of where I think it’s ideal placement for this. css is acting on the slide img layer as well so you can see the difference. If you remove the purple div from the dom the slide layer should be visible. Thank you!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problem with z-index’ is closed to new replies.