Slider as background in slide 1?

Permalink Browser Info Environment
Hi,

Is is possible to make the background of slide 1 a fullscreen image slider?

Thanks in advane?

Type: Pre-Sale
Status: In Progress
grafoman
View Replies:
jordif replied on at Permalink Reply
jordif
Hi,

yes, it's possible.

There are some new features in the latest version of the theme that are still undocumented, one of them is the background slider.

I need to add this to the demo pages & documentation (again, sorry about that, hopefully next week i'll have the time to finish this).

Anyway it should be pretty easy to set up: you only need to add a "Image Slider" block to the first slide, add as many slides as you wish, and then click on the block, select Design & Custom template, click on the gear icon, and choose the "Background slider" custom template.

If you want to add other blocks on top of the slider, you only need to make sure the Image Slider block is the first block in the slide (otherwise it will cover the other blocks you add).

Here is a quick demo:

http://longstoryshort.15robots.com/background-slider...

Let me know if you need anything else,

Jordi
grafoman replied on at Permalink Reply
grafoman
Your replies never disappoint.
Thank you!
grafoman replied on at Permalink Reply
grafoman
Okay, so i managed to make this work.
check http://mijnronse.be/
Problem i have is the transition effect gives kind of a 'flash'. Any way to fix this?

EDIT: nvm i fixed this by making the background color of the slide black ;)
jordif replied on at Permalink Reply
jordif
great, that's a clever solution :)

The slider look very nice

Jordi
silentdrummer replied on at Permalink Reply
silentdrummer
is it possible to also have the parallax effect on the background slider?
jordif replied on at Permalink Reply
jordif
Hi,

you could try changing the slider position to fixed:

Go to Design -> Customize, and paste the following code into the "Custom CSS" field:

.no-mobile .ccm-bg-slider-container {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
}
.no-mobile .ccm-bg-slider-container .ccm-image-slider {
    position:fixed;
}



Here is a quick demo:

http://longstoryshort.15robots.com/background-slider-2...

I haven't tested this thoroughly, you should check it on different browsers.

Hope this helps,

Jordi
silentdrummer replied on at Permalink Reply
silentdrummer
thanks for the quick reply! it's not exactly parallax but it goes into the right direction. probably only works for the first slide, doesn't it?
jordif replied on at Permalink Reply
jordif
Yes, that would only work for the first slide.

If you need something similar for another slider (for instance the second) you could try a different approach:

1. Use "Parallax Backgrounds: enabled via JS" (instead of CSS)

2. Apply a background color or backoground image to all slides

3. Use this custom CSS (instead of the code I posted in the previous comment):

.no-mobile .lss-slide:nth-child(1) {
    z-index: 1;
}
.no-mobile .ccm-bg-slider-container {
    position:fixed;
}


Note that you need to change the z-index of any slides before the slide with the background slider to 1. So if you use the background slider in slide 3, you would also need to change the z-index for the second slide: .no-mobile .lss-slide:nth-child(2)

Here is a demo:

http://longstoryshort.15robots.com/background-slider-3...

Again, this is pretty experimental, the safest way to use the background slider is to let it scroll with the page, or simply use a background image if you want to have the parallax effect.

Regards,

Jordi

concrete5 Environment Information

Not available

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.81 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.