Full screen slider

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to create a full-screen slider cell for Layouts

Solution:
- Duplicate the standard slider Layout cell. Modify the PHP code to work as a full-screen slider.
- Add the relevant CSS and JS to your Layouts CSS and JS editors.

Relevant Documentation: https://toolset.com/documentation/user-guides/creating-custom-cells-unique-functionality/

This support ticket is created 7 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Layouts plugin, Sliders, Views plugin

This topic contains 21 replies, has 2 voices.

Last updated by johanL-2 7 years, 7 months ago.

Assisted by: Christian Cox.

← 1 2

Author

Posts

May 1, 2017 at 6:58 pm #519142

Christian Cox

Unfortunately it's not possible to switch between the slider types based on browser. I'll run some tests in IE this afternoon and update you shortly.

May 1, 2017 at 10:07 pm #519200

Christian Cox

Quick update - I wasn't able to come up with a good solution for IE < Edge today, so I will pick up again here tomorrow.

May 2, 2017 at 5:51 am #519266

johanL-2

HI,
it working as it should in Microsoft Edge but not in internet explorer 11. In IE 11 all elements are fading not only the background.
Johan

May 2, 2017 at 3:12 pm #519449

Christian Cox

Hi, please add the following code to your Layout CSS editor:

@media all {
  .fullscreen.carousel .carousel-inner > .left.active
  {
    left:0; 
  }
}

I tested Edge, IE 10 and IE 11 on Windows. It appears the brief white flash between slides has been resolved. Can you confirm?

May 2, 2017 at 6:51 pm #519518

johanL-2

Wow the flash is gone, but there is still one problem with IE11 when scrolling down to see the content (rows in yellow in attached image) it is not looking good. It seems to be something with the layers as the layout rows are fading together with the slider.

May 2, 2017 at 7:22 pm #519529

Christian Cox

Ah, a z-index problem. Hover over each row (except the row with your fullscreen slider) and click the Pencil icon "Edit row". Add this class in the optional CSS input area:

fs-slide-over

Then add the following code in Layouts CSS and JS:

.fs-slide-over {
  position:relative;
  z-index:4;
}

May 3, 2017 at 9:42 am #519724

johanL-2

WOW now everything is working. I had to add following to get rid of the image jumping (know problem in IE11 apparently),

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

Thanks alot!!!!

← 1 2

The forum ‘Types Community Support’ is closed to new topics and replies.