Hi,
In the Nectar slider, Is it possible to slide images and text on top of a static background image? So the above the image will change but the background won't.
Also, can I replace the heading/cation with image in Nectar slider?
Looking forward to your reply.
Regards,
Glen
What exactly do you mean the first slide needs to be a full bg image? When you're overlaying an image in the caption you still need to provide either a bg image or video because that's what the slider is really loading off of. What were trying to set it up like? Perhaps share your URL?
I've tried following your solution here to no avail. I think I may be missing something?
In your first response to Glen, you say "Leave the background image on each slider empty". However in your second response, you say "...you still need to provide either a bg image or video..." Both these statements contradict each other. I'm assuming the second is true as it makes sense that you need to have a background image for the slider to function. But also because the slider just hangs on the loader if you don't include it. :)
But what doesn't seem to work is the transparency part of the solution. After setting up my slides with images added to the caption areas and pasting the 'transparency' css, I went to my page and inserted a 'full_width_section' shortcode which includes my desired background image, and finally nested the nectar slider within it. The result being that the background images assigned to each slide are still showing with full opacity. I've checked through Firebug and the background-color on both the slide and container appear to be transparent "background-color: rgba(0, 0, 0, 0) !important;"
You're correct my wording was off in the first ticket - a BG still needs to be supplied :)
The mod in the first response doesn't include a way to remove the BG image, it's to remove the BG color - for the slides just upload a clear transparent .png. If this still is giving you problems after that, please supply me a URL so I can take a look.
Thanks for your patient help. I now have a new CSS path question related to this topic (didn't find an answer by search through the archives :( )
In the page custom CSS, is there a way to target at the image inside a Nectar slider/row content? I tried a few ways but none is working: First was giving an Extra Class Name in the row, and in the page CSS I put .RowClassName .wpb_wrapper {width:60%;} but it's not working. (btw, the Nectar slider is a top parallex one ) Then tried to give a class name to the image within the slider and then in page css I put .imageClassName .RowClassName .wpb_wrapper {width:60%;} still no luck. I also tried to put the CSS in Salient Options panel.
Hey Glen, very sorry about the delay - I don't know how this was missed.
I've logged in and sorted the overlaid image so that it can respond to the screen size :) All that you needed to do was add some extra blank space to the sides of your PNG (i've added a few hundred pixels cushion on the sides).
In regards to your additional 2 question -
1. Try updating to the latest release to sort this out.
2. The parallax effect is disabled for mobile devices since it wouldn't work right with the scroll event via touch and it would be too resource intensive.
Hey Glen,
you can indeed put images in the caption field of the slider, but having a static background like you're wanting can be done with a little creativity.
Leave the background image on each slider empty, add your images into the caption field like:
and then add the nectar slider into a row with the full width background type and your desired bg image set.
Finally add this into your custom css box in the Salient options panel to make the slider transparent:
body .swiper-slide, body .swiper-container { background-color: transparent!important; }Cheers :)
Thanks so much Nectar, just tried it and it works just fine!
One further question, can the image be resized according to browser like the background image?
Sorry, I just found out that to make it work, the first Nectar slide needs to be fill a background image. Can this be solved?
Hey again Glen!
What exactly do you mean the first slide needs to be a full bg image? When you're overlaying an image in the caption you still need to provide either a bg image or video because that's what the slider is really loading off of. What were trying to set it up like? Perhaps share your URL?
Cheers :)
Thanks the problem solved!
Hi IAN,
I've tried following your solution here to no avail. I think I may be missing something?
In your first response to Glen, you say "Leave the background image on each slider empty". However in your second response, you say "...you still need to provide either a bg image or video..." Both these statements contradict each other. I'm assuming the second is true as it makes sense that you need to have a background image for the slider to function. But also because the slider just hangs on the loader if you don't include it. :)
But what doesn't seem to work is the transparency part of the solution. After setting up my slides with images added to the caption areas and pasting the 'transparency' css, I went to my page and inserted a 'full_width_section' shortcode which includes my desired background image, and finally nested the nectar slider within it. The result being that the background images assigned to each slide are still showing with full opacity. I've checked through Firebug and the background-color on both the slide and container appear to be transparent "background-color: rgba(0, 0, 0, 0) !important;"
Hope you can help.
cheers
Hey Adam!
You're correct my wording was off in the first ticket - a BG still needs to be supplied :)
The mod in the first response doesn't include a way to remove the BG image, it's to remove the BG color - for the slides just upload a clear transparent .png. If this still is giving you problems after that, please supply me a URL so I can take a look.
Cheers
Hi IAN,
Ahh yes... the ellusive 'transparent png' :) That was the key! I have it working now. Thank you for clearing that up.
cheers
You're very welcome Adam :)
Cheers!
Hi,
Thanks for your patient help. I now have a new CSS path question related to this topic (didn't find an answer by search through the archives :( )
In the page custom CSS, is there a way to target at the image inside a Nectar slider/row content? I tried a few ways but none is working: First was giving an Extra Class Name in the row, and in the page CSS I put .RowClassName .wpb_wrapper {width:60%;} but it's not working. (btw, the Nectar slider is a top parallex one ) Then tried to give a class name to the image within the slider and then in page css I put .imageClassName .RowClassName .wpb_wrapper {width:60%;} still no luck. I also tried to put the CSS in Salient Options panel.
I reckon it maybe the wrong CSS path?
Cheers,
Glen
Hey Glen!
Please always provide page link if you need us to write some custom css for you . Also please identify which element you need modified :)
Cheers
ThemeNectar Support Team
Hey Glen, very sorry about the delay - I don't know how this was missed.
I've logged in and sorted the overlaid image so that it can respond to the screen size :) All that you needed to do was add some extra blank space to the sides of your PNG (i've added a few hundred pixels cushion on the sides).
In regards to your additional 2 question -
1. Try updating to the latest release to sort this out.
2. The parallax effect is disabled for mobile devices since it wouldn't work right with the scroll event via touch and it would be too resource intensive.
Cheers :)