Simulate Slideshow Widget BACKGROUND Scheme using CSS3

[Acorn]

For the lack of any other input, I have added:

.xr_strb {
left: -40px !important;
top: -13px !important;
}

to the Page code (head) CSS.
This sorts out the positioning issue of the banner.

I then just increased the animation total time to 140s so there is a longer delay for the last image (12) but the first image (1) repeats now get a proper look in.

Not perfect but usable.

Acorn

[tomcadman]

Acorn,

I very much appreciate the input, and I am eager to apply your code in the project. However, I am confused as to the way XARA adds html and head code...

1) First off, when I open your CSS-Cross-fade Carousel XAR file, it gives me an error , as I am using Xara Designer Pro X 17.1.0.60742 DL x64 Dec 9 2020. (Hopefully, this is not deleting something I need.)
2) Secondly, when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html? (When I generate the HTML, I see the Head code, but I see no Support folder with your example, nor any css file that contains the code.)

Thanks again,
-Tom

[Acorn]

Acorn,

I very much appreciate the input, and I am eager to apply your code in the project. However, I am confused as to the way XARA adds html and head code...

1) First off, when I open your CSS-Cross-fade Carousel XAR file, it gives me an error , as I am using Xara Designer Pro X 17.1.0.60742 DL x64 Dec 9 2020. (Hopefully, this is not deleting something I need.)
2) Secondly, when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html? (When I generate the HTML, I see the Head code, but I see no Support folder with your example, nor any css file that contains the code.)

Thanks again,
-Tom

Tom, the Warning is not an error, it's just telling you I used a later version (Xara Pro+). All will be good.

The body code is for the content, the images and the captions.
The CSS is in the Page HTML code (head) as it is styling.
Delete the Placeholder, you lose the content but not the styling.

If it worries you, put it in the Placeholder code (head).
It makes it portable across pages if all you want is the same images on all pages.

It would actually be better the CSS was in Website Code (head).
That way you can have different carousels on any page, just change the content.

Acorn

[tomcadman]

...when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html?...
-Tom

Never mind... I found it under the Page Tab.

-Tom

[tomcadman]

...I used the XDA v16+ use of Image Filenames to create a list of indexed images (gates, gates1 to gated11)... it is safest to select all images and re-apply the label for the Image Filename...

In light of above comment, can you elaborate on use of Image Filenames generated within XARA app? (e.g. "image-name@2x", etc.)
That is to say, how can I anticipate what XARA generated filenames will be for the <figure> code?

Thanks,
-Tom

[Acorn]

In light of above comment, can you elaborate on use of Image Filenames generated within XARA app? (e.g. "image-name@2x", etc.)
That is to say, how can I anticipate what XARA generated filenames will be for the <figure> code?

Thanks,
-Tom

Tom, the @2x is the Retina (192dpi) image that is generated.
If unticked, just use image-name.jpg instead.

Acorn

[tomcadman]

Acorn,

FYI... I have it working (with lower grade images which I will replace later.)

Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in original example TEST1.)

Thanks,
-Tom

[Acorn]

Acorn,

FYI... I have it working (with lower grade images which I will replace later.)

Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in original example TEST1.)

Thanks,
-Tom

Tom, I would quickly create a black box a quarter the height of the carousel and add a Flat Transparency top to bottom, starting outside the box so the start is opaque.
Clone and flip horizontally and Stretch to width > Tile both.

Acorn

[tomcadman]

Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in original example TEST1.)

Never mind... I got it all to work... TEST3 version.

Thanks for all your help!

-Tom