Hello Richard,
Thanks a lot for your advices !
Since it's a little too complicated for me anyway I asked some help from a developper friend.
Thanks to your advices he managed to do that :
<script>
function resizeCaption () {
const slides = jQuery('.lay-carousel-slide .slide-inner > img')
const slidesWidth = slides.map((i, caption) => {
return jQuery(caption).width()
})
jQuery('.captions-slider .single-caption-inner').each((i, caption) => {
jQuery(caption).width(window.innerWidth - slidesWidth[i]).css('margin-left', slidesWidth[i] + 'px')
})
}
window.laytheme.on('newpageshown', resizeCaption)
window.addEventListener('resize', resizeCaption)
</script>
And it kind of work ! But not perfectly.
First it seems I need to resize the window browser for the script to be taken into account.
Then the caption doesn't correspond to the image. I managed to fit the caption with the image though with some CSS but it's not a good way to do it. I changed this :
.lay-carousel-sink-parent {
position: absolute;
top: 50%;
left: 50%;
bottom: auto;
transform: translate(-50%, -50%); }
to this :
.lay-carousel-sink-parent {
position: absolute;
top: 50%;
left: 250%;
bottom: auto;
transform:translate(-50%, -50%); }
But it doesn't really work because if I add another image to the carousel, I need to change again left: 250%; to maybe 300%
Then the caption numbers are not centered like the captions text.
Actually there were out of the screen, so I managed to centered it a little like that but it's not pretty...
.sink-with-numbers-and-captions.lay-carousel-sink.numbers-right .numbers {
right: 85%;
top: 250% !important;
position: absolute; }
Thank you again !
