Carrusel de imágenes de Lume

2097 Andev.web

Abrir en el editor Publica tu código

Recomendado

13 June 2025

Un código de Landingpage1

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<lume-scene webgl physically-correct-lights perspective="800" fog-mode="linear" fog-color="black" fog-near="600" fog-far="700">
	<lume-camera-rig distance="800" min-distance="800" max-distance="800" min-vertical-angle="0" max-vertical-angle="0">
		<lume-point-light intensity="1900" slot="camera-child"></lume-point-light>
	</lume-camera-rig>
	
	<my-photos></my-photos>
</lume-scene>

</body>
</html>

CSS

JS

import {Element3D, element, html, attribute, Index} from 'lume'
import {signalify} from 'classy-solid'

async function fetchPhotos() {
	const json = await fetch('https://picsum.photos/v2/list?page=2&limit=14').then(r => r.json())

// change the size to 100x100
	json.forEach(photo => {
		const parts = photo.download_url.split('/')
		parts.pop()
		parts.pop()
		parts.push(100)
		photo.download_url = parts.join('/')
	})

console.log('photos:', json.map(photo => photo.download_url))
	return json.map(photo => photo.download_url)
}

const photos = await fetchPhotos()

element('my-photos')(class extends Element3D {
	template = () => html`
        <carousel-layout radius="200">
            ${photos.map((photo, i) => html`
				<lume-rounded-rectangle
					size="80 80"
					corner-radius="10"
					thickness="0.1"
					mount-point="0.5 0.5"
					has="projected-material"
					texture-projectors=${".projector"+i}
					cast-shadow="false"
					receive-shadow="false"
					roughness="0.5"
				>
					<lume-texture-projector
						class=${"projector"+i}
						src=${photo}
						fitment="contain"
						size-mode="p p"
						size="1.1 1.1"
						align-point="0.5 0.5"
						mount-point="0.5 0.5"
						position="0 0 150"
					></lume-texture-projector>
				</lume-rounded-rectangle>
            `)}
        </carousel-layout>
    `

})

element('carousel-layout')(class extends Element3D {
	static observedAttributes = {
		radius: attribute.string(),
	}
	
	radius = 200
	
	hasShadow = true
	childrenSignal = []
	
	constructor() {
		super()
		signalify(this, 'childrenSignal')
	}
	
	connectedCallback() {
		super.connectedCallback()
		
		this.createEffect(() => {
			console.log('children length: ', this.childrenSignal.length)
			let i = -1
			for (const child of this.childrenSignal) {
				i++
				child.slot = "slot" + i
			}
		})
	}
	
	#queued = false
	
	childConnectedCallback(...args) {
		super.childConnectedCallback(...args)
		
		if (this.#queued) return
		this.#queued = true
		// return
		requestAnimationFrame(() => {
			console.log('handle children', this.children)
			this.#queued = false
			this.childrenSignal = Array.from(this.children)
		})
	}

template = () => html`
		<${Index} each=${() => this.childrenSignal}>
			${(_, index) => html`
				<lume-element3d rotation=${() => [0, (360 / this.childrenSignal.length) * index]}>
					<lume-element3d position=${() => [0, 0, this.radius]} mount-point="0.5 0.5">
						<slot name=${() => "slot" + index}></slot>
					</lume-element3d>
				</lume-element3d>
			`}
		</>
	`
})

Carrusel de imágenes de Lume

Recomendado

ilusión de profundidad

Camino de escape

Un código de Landingpage1

HTML

CSS

JS

Recomendado

ilusión de profundidad

Camino de escape

Un código de Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS