Necesito ayuda, alguien que me pueda brindar un código de html para realizar un carrusel dinámico en una landing de Funnelish.
Aquí está el código HTML con CSS y JavaScript.
<style>
.carousel {
width: 100%;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.carousel-control.prev {
left: 10px;
}
.carousel-control.next {
right: 10px;
}
</style>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<button class="carousel-control prev" onclick="prevSlide()">❮</button>
<button class="carousel-control next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentSlide = 0;
function showSlide(index) {
const slides = document.querySelectorAll('.carousel-item');
const totalSlides = slides.length;
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = totalSlides - 1;
} else {
currentSlide = index;
}
const offset = -currentSlide * 100;
document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentSlide);
});
</script>
is there a way I can Have text under each carrousel? so that the customer swipes both image and text?
Yes @mimshach, you can add text below each carousel item by including an additional div
for the text within each carousel-item
. Here’s how you can modify your existing code to include text under each image:
<style>
.carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
text-align: center;
}
.carousel-item img {
width: 100%;
height: auto;
}
.carousel-text {
padding: 15px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 1.2em;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.carousel-control.prev {
left: 10px;
}
.carousel-control.next {
right: 10px;
}
</style>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="image1.jpg" alt="Image 1">
<div class="carousel-text">Text for Image 1</div>
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
<div class="carousel-text">Text for Image 2</div>
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Image 3">
<div class="carousel-text">Text for Image 3</div>
</div>
</div>
<button class="carousel-control prev" onclick="prevSlide()">❮</button>
<button class="carousel-control next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentSlide = 0;
function showSlide(index) {
const slides = document.querySelectorAll('.carousel-item');
const totalSlides = slides.length;
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = totalSlides - 1;
} else {
currentSlide = index;
}
const offset = -currentSlide * 100;
document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentSlide);
});
</script>
In this code, the carousel-text
div is added to each carousel-item
div to display text below each image. The text will slide along with the images as you navigate through the carousel.
Hola amigo, acabo de pegar el codigo de carrusel dinamico en custom css / js pero no pasa nada y no da movimiento, me puedes ayudar para colocarlo bien, agradezco tu ayuda muchas gracias
@Gustavo_Gomez_Martin ¡Hola! Claro que te puedo ayudar a corregirlo. ¿Podrías crear un video o screencast mostrando lo que has hecho y compartirlo conmigo? De esa manera, podré verlo y ayudarte mejor.