Add image aspect ratio to prevent page jumps
This commit is contained in:
@ -31,7 +31,8 @@ struct ImageGallery: HtmlProducer {
|
||||
let needsPagination = images.count > 1
|
||||
|
||||
for image in images {
|
||||
result += "<div class='swiper-slide'>"
|
||||
let sizeText = image.image.getImageDimensions().map { " style='aspect-ratio: \(Int($0.width)) / \(Int($0.height))'"}
|
||||
result += "<div class='swiper-slide'\(sizeText ?? "")>"
|
||||
result += image.content
|
||||
if needsPagination {
|
||||
result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"
|
||||
@ -57,6 +58,9 @@ struct ImageGallery: HtmlProducer {
|
||||
return """
|
||||
var swiper_\(id) = new Swiper("#\(id)", {
|
||||
loop: true,
|
||||
lazy: {
|
||||
loadPrevNext: false,
|
||||
},
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
|
Reference in New Issue
Block a user