Slider with visible slides off the page?

[toolman]

Hi there,

I am trying to create a slider which allows users to scroll through some divs.
I have the following which works, but what I would like to do is have one of the boxes faded out to the right of the page “outside” of the visible area. Then when the user scrolls through, have the slide to the left appear off the page and faded out.

This is what I am trying to achieve:

This is the fiddle I have:

Slider Boxes - JSFiddle - Code Playground

Can anyone help me achieve this?

Thanks!

[PaulOB]

That will be quite awkward to do if you want the transparent parts outside the main page section. You would need to rebuild the page to allow for a wider slider and then you could cover up the first and last ones with a partially opaque overlay.

Maybe a quick fix would be to make the items six across to start with and then just cover the two outside ones.

e.g.

.testimonial-carousel:before,
.testimonial-carousel:after{
  content:"";
  position:absolute;
  left:15px;
  top:0;
  bottom:0;
  z-index:99;
  width:16.666%;
  background:orange;
  opacity:0.8;
}
.testimonial-carousel:after{
  left:auto;
  right:0;
}

That probably needs to go into a min-width media query as the sizes will change when the screen is smaller than 1200. Or alternatively set up a few media queries and adjust the widths to match the items in the slider as shown in the slider settings.

Then in your js options set the wide screen to six across.

slidesToShow: 6,

Screenshot from your fiddle with changes above implemented.

[toolman]

Thanks for the code suggestion. I have tried that and have a play with it.