How can I add this slideshow to my design?
I am not a programmer, I have tried it but it does not work for me. someone could explain in detail the steps to achieve it
It is always better to show us what you have attempted, it may be a simple mistake or a big one. Either way we may be able to offer pointers so you understand what you are copying and trying to use.
I have replaced two of the links that go in the head with the cdn versions.
Which means you do not have to manually download and add them to the project. ( which if my guess is right may have been one of you issues - but who knows? (see above ) 
)
This goes in the head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slideshow Js -->
<script src="https://cdn.jsdelivr.net/npm/subtle-slideshow@1.0.0/jquery.subtle-slideshow.js"></script>
<!-- Slideshow CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/subtle-slideshow@1.0.0/subtle-slideshow.css">
--
Add a Rect to the scene and then put this in it's innerText.
<div id="slides">
<a class="slide" href="#link01">
<span class="animate right" style="background-image: url(https://frontbackend.com/storage/resources/subtle-slideshow/salad-shaker-hero.jpg)"></span>
<div class="static-content"><h1>Shaker</h1></div>
</a>
<a class="slide" href="#link02">
<span class="animate in" style="background-image: url(https://frontbackend.com/storage/resources/subtle-slideshow/bike-basket-01.jpg)"></span>
<div class="static-content"><h1>Bike</h1></div>
</a>
<a class="slide" href="#link03">
<span class="animate down" style="background-image: url(https://frontbackend.com/storage/resources/subtle-slideshow/fles-hero-image.jpg)"></span>
<div class="static-content"><h1>Hero</h1></div>
</a>
</div>
i.e
Now add a new on scene load action to call a new Javascript function.
And put this in the function.
// These are te default settings.
$('#slides').slideshow({
randomize: true, // Randomize the play order of the slides.
slideDuration: 6000, // Duration of each induvidual slide.
fadeDuration: 1000, // Duration of the fading transition. Should be shorter than slideDuration.
animate: true, // Turn css animations on or off.
pauseOnTabBlur: true, // Pause the slideshow when the tab is out of focus. This prevents glitches with setTimeout().
enableLog: false, // Enable log messages to the console. Useful for debugging.
slideElementClass: 'slide', // This is also defined in the CSS!
slideshowId: 'slideshow' // This is also defined in the CSS!
});
Thats the very basic setup from the docs.
subtle-slideshow.hype.zip (16.1 KB)
5 Likes
Heres a Replica of the demo using @MarkHunte 's file.
subtle-slideshow_pb_replica.hype.zip (15.6 KB)
1 Like