I need a custom slider made, to specific design specs seen in my design outlines. I'm getting short on time so I decided to just have you do it.
The section is seen on the home page of the Nouvola site design. We skipped over it when you did my site theme coding. It's the section seen in the attached temp.png.
Basically, there's 3 screens. The text and blue link bar at the top controls which slide is shown. ("DevOps Engineers, Management, C-Suite") When you click any of those items a few things happen:
1- The blue background for that item slides in to place behind it, signifying that item is now selected. Ideally the blue background would slide/animate left and right when selected, but if that's not possible, it could just jump to the new position.
2- The background image should fade in/out to the next one.
3- The content over the top of the image should slide in from the left or right side of the screen, depending on what "direction" you are going. So for example, if you were starting on DevOps Engineers, and clicked Manaeger, the existing content would slider off screen to the left while the new (Manager) content would appear to slide in from the right side of the screen. If that effect is not possible, a fall back would be to just have it fade in and out in place.
Finally, it should be responsive ready. Basically with padding removed. Can be seen in responsive mockup file below.
You could try to modify a Visual Composer module I guess, or write it from scratch and just plug in the html and new js. that might be best. I'd like to avoid a new plugin if possible. The main goal is to keep it light weight so load times are kept fast on the home page. So, approach this with that in mind please. As long as it's "lightweight" and loads fast, you can do it however you want.
- [url removed, login to view] This is just to show you what section I'm talking about.
[url removed, login to view],[url removed, login to view],[url removed, login to view] these 3 images show the 3 states for the slider.
[url removed, login to view] This file shows the small responsive state view.
[url removed, login to view],[url removed, login to view],[url removed, login to view] These are the slide backgrounds.
- [url removed, login to view],[url removed, login to view] etc etc... These are the slide icons.
I think that covers it. Please let me know your availability this week. I'd like to have this done by thursday or friday. I may also send in a 2nd small project also if you are up for it. Thanks!!