Carousel 3D Rotating
Rust UI component that displays CSS Carousel 3D Rotating.
css
use leptos::prelude::*;
use leptos_meta::Stylesheet;
#[component]
pub fn DemoCarousel3dRotating() -> impl IntoView {
view! {
<Stylesheet id="carousel3d" href="/components/carousel3d.css" />
<div class="mainDiv">
<div class="carousel">
<div class="carousel-control-button left">
<input type="radio" name="carousel-control-input" />
</div>
<div class="carousel-control-button right">
<input type="radio" name="carousel-control-input" checked />
</div>
<div class="carousel-rotation-direction">
<ul class="carousel-item-wrapper" style="--_num-elements: 11">
<li
class="carousel-item"
style="--_index: 1; --_image-url: url('https://images.unsplash.com/photo-1706485220806-2d0d9ce98555?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/ein-hohes-gebaude-mit-einer-uhr-an-der-seite-cI09n4yMIYc"
target="_blank"
>
Architecture Example 1
</a>
</li>
<li
class="carousel-item"
style="--_index: 2; --_image-url: url('https://images.unsplash.com/photo-1706146280538-620fa8cda080?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/ein-sehr-hohes-gebaude-mit-vielen-fenstern-3svDIdPOT6M"
target="_blank"
>
Architecture Example 2
</a>
</li>
<li
class="carousel-item"
style="--_index: 3; --_image-url: url('https://images.unsplash.com/photo-1702298616106-adbe0f447455?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/ein-sehr-hohes-gebaude-mit-vielen-fenstern-ivYgEOo7MnQ"
target="_blank"
>
Architecture Example 3
</a>
</li>
<li
class="carousel-item"
style="--_index: 4; --_image-url: url('https://images.unsplash.com/photo-1565363887713-783cd82d36d2?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/weiss-graues-gebaudekonzept-8yOPWMS46CQ"
target="_blank"
>
Architecture Example 4
</a>
</li>
<li
class="carousel-item"
style="--_index: 5; --_image-url: url('https://images.unsplash.com/photo-1701025034709-bef78e69d1ee?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/ein-paar-hohe-gebaude-mit-vielen-fenstern-duj9YsiNKvM"
target="_blank"
>
Architecture Example 5
</a>
</li>
<li
class="carousel-item"
style="--_index: 6; --_image-url: url('https://images.unsplash.com/photo-1701824580548-4f285fc0b80a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/die-spiegelung-eines-gebaudes-in-den-fenstern-eines-anderen-gebaudes-QT6ltyDT7UA"
target="_blank"
>
Architecture Example 6
</a>
</li>
<li
class="carousel-item"
style="--_index: 7; --_image-url: url('https://images.unsplash.com/photo-1558472306-75b150ac26eb?q=80&w=2030&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/nahaufnahme-des-weissen-gebaudes-tKnda8e9ejM"
target="_blank"
>
Architecture Example 7
</a>
</li>
<li
class="carousel-item"
style="--_index: 8; --_image-url: url('https://images.unsplash.com/photo-1713623210045-95d02b35c4a2?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/ein-hohes-gebaude-mit-zwei-balkonen-und-einer-uhr-sYg7bcIodC8"
target="_blank"
>
Architecture Example 8
</a>
</li>
<li
class="carousel-item"
style="--_index: 9; --_image-url: url('https://images.unsplash.com/photo-1700846968547-ace2dacd5e0b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/eine-nahaufnahme-der-seite-eines-gebaudes-VvhIUx1lITA"
target="_blank"
>
Architecture Example 9
</a>
</li>
<li
class="carousel-item"
style="--_index: 10; --_image-url: url('https://images.unsplash.com/photo-1700846978475-5f4dd936c00a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/eine-wand-aus-metallquadraten-und-quadraten-a_XIDnN6C0Y"
target="_blank"
>
Architecture Example 10
</a>
</li>
<li
class="carousel-item"
style="--_index: 11; --_image-url: url('https://images.unsplash.com/photo-1707788620837-cd3efcce3ceb?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
>
<a
class="carouselAnchor"
href="https://unsplash.com/de/fotos/eine-nahaufnahme-einer-metallstruktur-mit-einem-himmelshintergrund-9u9t6gP8R-s"
target="_blank"
>
Architecture Example 11
</a>
</li>
<li class="carousel-ground"></li>
</ul>
</div>
</div>
</div>
}
}
Installation
# Coming soon :)
Usage
// Coming soon 🦀