Hi chaps,
Any idea why this slideshow doesn’t work when I embed it into a Blocs page, please?
https://parkeston.com/xara2021/billy-bram/slide1.htm#xl_xr_page_slide4
When embedded, it is static: http://bramhill.myzen.co.uk/index.html
If you look at the page errors, its because of the Cross-origin security Policy.
Do you have any control over the other domain?
Hi Malachiman,
To a certain extent, yes.
I’m getting the files to upload on my domain.
Using the same domain is the simplest solution.
1 Like
Chiefsub68, Could you please share the tip how you did this slideshow. I did one but it was a long ago with Movavi Slideshow Maker using some of my family photos. I’m going to make my own business and already working on the visual part of the website. I would really appreciate your response!
Hello @wondercrew
I abandoned the iframe in the end. The current version at fletchersport.co.uk was quite easy and all done within Affinity Photo and Blocs. I took the basic picture of the hand holding the mobile phone and cropped it to the right size in Affinity. Still in Affinity I replaced the “screen” several times to create separate images. The carousel is a basic Affinity carousel, with the picture added on each layer and the “previous” and “next” buttons hidden.
@PeteSharp reminded me how to make the carousel vertical rather than horizontal:
Add this CSS code to the page header. Then add a class vertical-carousel to the carousel.
<style>
.vertical-carousel .carousel-item-next.carousel-item-left,
.vertical-carousel .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.vertical-carousel .carousel-item-next,
.vertical-carousel .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.vertical-carousel .carousel-item-prev,
.vertical-carousel .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}
</style>
Will
1 Like