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?
Is is possible to make the background of slide 1 a fullscreen image slider?
Thanks in advane?
Type: | Pre-Sale |
---|---|
Status: | In Progress |
Your replies never disappoint.
Thank you!
Thank you!
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 ;)
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 ;)
great, that's a clever solution :)
The slider look very nice
Jordi
The slider look very nice
Jordi
is it possible to also have the parallax effect on the background slider?
Hi,
you could try changing the slider position to fixed:
Go to Design -> Customize, and paste the following code into the "Custom CSS" field:
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
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
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?
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):
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
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
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