Slideshows

[SPD54]

Can I use a mixture of portrait and landscape when creating a slideshow and any recommendations to best one of the ones that come with xara web designer +
Have used wowslider in the past.
Thanks

[Egg Bramhill]

Hi SPD, I rarely use pre-made slideshows. One of the better ones is that created by Siran recently posted about in this thread.

I prefer to create the slideshows independantly and have them load as a sub-website into a placeholder.

I attach a .xar I recently used using Sirans method. It has square, portrait & landscape images but done via a cheat by creating them all square with backgrounds matching the page background but after further consideration this was unnecessary as it's the page that rotates, not just the image.

[Initiostar]

I am with Egg here in that there are simply better alternatives for creating slideshows and sliders. Where the design calls for some level of automation and transition, then at least for me, it makes sense to create a sub-website and embed that into the main website using a standard iframe. Easier to maintain and update.

Here are two examples; a presentation embedded into a main website and a transition website embedded into the main website. Both can have different transitions as well, so there a many options to play with. Credit goes to Siran and Acorn for the code that makes these work.

https://initiostar.co.uk/demo/photo-slider/

[gwpriester]

I almost forgot this option:

Acorn gave me a simple script that creates a simple fade from slide to slide www.eyetricks-3d-stereograms.com The script can be altered.

The images are simply stacked, one atop the other on the page and display in the order they are stacked.

Each photo has the same name: htmlclass="photo"

And this script goes in the Page > Head window

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89h gyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Global site tag (gtag.js) - Google Ads: 1069362885 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-1069362885"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-1069362885');
</script>

[Acorn]

@Gary, sorry but the code you supplied is mostly nothing to do with any slider but instead is for Google's tracking mission!

Your slider did use anime.js and that is invoked by the very first <script> call only.
The rest is in the Page Body:

<script>
      var images =      [].slice.call(document.querySelectorAll('.photo')).slice(1, 100);
      var showtime = 1500;
      var carousel = {
      targets: images,
      opacity: [0, 1],
      delay: anime.stagger(4 * showtime),
      easing: 'linear',
      duration: 2 * showtime,
      endDelay: showtime,
      loop: true,
      }
      anime(carousel);
      </script>

That aside, anime.js is probably overkill (as would the use of jQuery).
My preference is a pure CSS approach as JavaScript can be blocked by the viewer and the carousel never renders.

CSS - Simple Carousel.xar requires a little explanation.
It is tuned for 9 shapes - any size and orientation (images, Groups, Text blocks, blobs). You simply give them all a ClassName of htmlclass="slide".
If you have fewer, you change --scount in Page Body. You also have to delete all .slide:nth-of-type() lines with any number bigger than your current --scount value.
If you have more, you change --scount in Page Body. You also have to add new .slide:nth-of-type() lines with numbers that increment the previous line until you reach your current --scount value.

Here, I have 9 slides that I wanted to show for 5.555 seconds each, a total of 50 seconds.
This is somewhat artificial but it make the percentage calculates in the @keyframes block: each 2% is one second in this 50-second carousel.
We have each slide is delayed to appear 5.555 seconds after the previous.
It is initial invisible and off the the left its own width.
Over the next second, it is revealed and moves to its spot and stays there for 5 seconds.
It then takes a second to fade out and move a little to the right.

You can change the fade and shifts or include your own transformations.

Acorn

[gwpriester]

This is why I am not doing website design any more.

[Egg Bramhill]

Very interesting effect Acorn. Here's one just messing with your ideas:

LINK

[Acorn]

Very interesting effect Acorn. Here's one just messing with your ideas:
LINK

Egg, I like the small letter displacement, it makes it quite funky.

Acorn