Module:ElementPortraitCarousel: Difference between revisions
// via Wikitext Extension for VSCode |
// via Wikitext Extension for VSCode |
||
| Line 51: | Line 51: | ||
end | end | ||
-- Create dual-image orbital display HTML | -- Create dual-image orbital display HTML with navigation arrows | ||
local function createDualImages(images, maxWidth) | local function createDualImages(images, maxWidth) | ||
local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person") | local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person") | ||
| Line 60: | Line 60: | ||
local img2 = frame:preprocess(string.format('[[File:%s|%s]]', images[2], maxWidth)) | local img2 = frame:preprocess(string.format('[[File:%s|%s]]', images[2], maxWidth)) | ||
-- Include navigation arrows similar to the carousel, but keep the orbital animation styles | |||
return string.format( | return string.format( | ||
'<div class="person-portrait-carousel">' .. | '<div class="person-portrait-carousel">' .. | ||
'<div class="carousel-container">' .. | '<div class="carousel-container">' .. | ||
'<div class="carousel-nav carousel-prev">◀</div>' .. | |||
'<div class="carousel-images" id="carousel-%s">' .. | '<div class="carousel-images" id="carousel-%s">' .. | ||
'<div class="carousel-item carousel-orbital-1" data-index="1">%s</div>' .. | '<div class="carousel-item carousel-orbital-1" data-index="1">%s</div>' .. | ||
'<div class="carousel-item carousel-orbital-2" data-index="2">%s</div>' .. | '<div class="carousel-item carousel-orbital-2" data-index="2">%s</div>' .. | ||
'</div></div></div>', | '</div>' .. | ||
'<div class="carousel-nav carousel-next">▶</div>' .. | |||
'</div></div>', | |||
navId, | navId, | ||
img1, img2 | img1, img2 | ||