Pro 5.1 Beta 1 - current slide's z-index

Beta
#1

Hi!

My goal is creating a design where the current slide is a bit larger than those adjacent to it.

In order for this to work, the current slide must be on top. However, it goes under the slides on one side. Here is a quick example of the problem:

image
image1479×468 41.1 KB

I could use this CSS:

.is-current-slide {
    z-index: 2;
}

The transition, however, is not graceful in that case. The z-index should not be applied immediately after clicking.

Is there a way to push the active slider to the front? If not, I think this option should be natively supported. :slight_smile:

2 Likes
#2

Hi @Misho,

Considering z-index can’t be transitioned, and because there are a number of pitfalls when using z-index in general, we’re opting not to manage it in any way on the slides natively. However, there is a way to make sure the active slide is always on top with a little custom CSS.

On each slide there are two CSS properties

--x-slide-distance
--x-slide-balance

Distance lets you know how far away a slide is from the active slide in either direction. Balance is set to zero when a slide is active, negative one when it is before the active slide, and negative one when it is after. Combined with calc, these properties can help you do all kinds of interesting things.

Try this CSS:

.x-slide {
  z-index: calc(var(--x-slide-distance) * -1);
}

It will give all the non active slides a negative z-index and the active slide will get z-index: 0;

2 Likes
#3

@alexander works like a charm!

I am now searching for a way to not transition the order, but to delay the z-index change so that it looks more natural. The stack order should change after the move has begun.

It appears that CSS cannot handle this since this is not a transition. However if I do use the transition, it could perhaps use a transition-delay with steps or something. I’ll play a bit more with this.

Or perhaps there is another way. Many years ago I got it working here on The Grid Slider, using this:

opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

I think I was modifying one of their premium sliders.

I saw the custom properties in the document and can’t wait to start playing with them!

Thanks!

EDIT: I managed to grab the full CSS from that slider:

Full CSS 
*/.slider-3d .tg-grid-slider {
    overflow: visible!important;
}
.slider-3d.tg-grid-loaded .tg-active-item {
z-index: 3;

}
.slider-3d.tg-grid-loaded .tg-item-inner {
-webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out, -ms-transform 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.slider-3d.tg-grid-loaded .tg-item-inner {
opacity: 1;
}
.slider-3d.tg-grid-loaded .tg-active-item .tg-item-inner {
opacity: 1;
-webkit-transform: scale3d(1.15,1.15,1.15);
-moz-transform: scale3d(1.15,1.15,1.15);
-ms-transform: scale3d(1.15,1.15,1.15);
-o-transform: scale3d(1.15,1.15,1.15);
transform: scale3d(1.15,1.15,1.15);
//-webkit-box-shadow: 0 0 100px rgba(0,0,0,0.25);
//-moz-box-shadow: 0 0 100px rgba(0,0,0,0.25);
//box-shadow: 0 0 100px rgba(0,0,0,0.25);
}
@media only screen and (max-width: 480px) {
.slider-3d .tg-grid-area-top1 *,
.slider-3d .tg-grid-area-top2 *,
.slider-3d .tg-grid-area-bottom1 * {
display: none;
}
.slider-3d.tg-grid-loaded .tg-item-inner {
opacity: 1;
}
.slider-3d.tg-grid-loaded .tg-active-item .tg-item-inner {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}*/

.slider-3d.tg-grid-loaded .tg-item-inner:not(.tg-active-item) {
height:80%!important;
margin-top:10%!important;
}
#4

I see what you mean. Some more thoughts on the matter

  • z-index is not a CSS property that can be transitioned, meaning you have to rely on the timing of actual CSS classes coming in and out.
  • .is-current-slide is added immediately, so there isn’t a way to use that.
  • If Scroll effects are enabled, a new set of classes are used x-effect-enter, x-effect-exit, x-effect-entering, x-effect-exiting. The entering/exiting classes are present during the transition, and are removed when it completes.
  • I haven’t tried this, but in theory you could target slides that finished entering with this: .x-effect-enter:not(.x-effect-entering)

Beyond that, there are probably some other ways but it would get into custom javascript and take a while to work out.

1 Like
#5

Hi @alexander!

This is kind of a same topic, so I figured to continue here.

I am trying to wrap my head around custom properties.

I have found that this would make each slide to the left and the right increasingly blurrier:

blur(calc(1px * var(--x-slide-distance)))

However, for the life of me, whatever I try when using Scale to make each slide slightly smaller, I am getting all kinds of wired results.

Basically I’d like a slider where the higher the --x-slide-distance to both sides is, the slides are something like 10% smaller. The look I am after is the wheel effect, where the active slider is larger at the front, and the other slides seem to go into the distance. I will also need to work on the slider gap, which will have to be dynamic as well.

I have tried to deconstruct stuff from Modern sliders and following the docs, but nothing. :confused:

Thanks!

PS: I have also tested this in the opacity field, but it seems it doesn’t work there at all: calc(0.5 * var(--x-slide-distance)))

#6

Gotcha, so it’s a little tricky because to scale down you need to go below zero to something like 0.9 but the --x-slide-distance variable is increasing upwards. A good way to get around that when working with 0-1 values is start with 1 and subtract a calculation from there. Maybe something like this:

scale(calc( 1 - var(--x-slide-distance) * .1)))

Looks like this one is working for opacity:

calc( 1 - var(--x-slide-distance) * .5)

Also, I think you’re going to love the new masking effect in this coming release. It’s another way to handle fading away from the edges that can be done at the container level.

2 Likes