mirror of https://gitlab.com/m3f_usm/cms-sveltekit
73 lines
2.5 KiB
Svelte
73 lines
2.5 KiB
Svelte
<script>
|
|
import { base } from '$app/paths';
|
|
</script>
|
|
|
|
<div>
|
|
<div id="carousel-home" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide-to="0"
|
|
class="active"
|
|
aria-current="true"
|
|
aria-label="Slide 1"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide-to="1"
|
|
aria-label="Slide 2"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide-to="2"
|
|
aria-label="Slide 3"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide-to="3"
|
|
aria-label="Slide 4"
|
|
></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active" data-bs-interval="10000">
|
|
<img src={`${base}/images/imagen-1.jpg`} class="d-block w-100" alt={"..."} loading="lazy" />
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src={`${base}/images/imagen-2.jpg`} class="d-block w-100" alt={"..."} loading="lazy" />
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src={`${base}/images/imagen-3.jpg`} class="d-block w-100" alt={"..."} loading="lazy" />
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src={`${base}/images/imagen-4.jpg`} class="d-block w-100" alt={"..."} loading="lazy" />
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#carousel-home"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
img {
|
|
max-height: 500px;
|
|
object-fit: cover;
|
|
}
|
|
</style> |