Carrucel
<div id="carousel" style="max-width: 800px; margin: auto; text-align: center;">
<img id="carousel-img" src="" alt="" style="width: 100%; border-radius: 12px;" />
<h2 id="carousel-title" style="font-size: 1.5rem; margin-top: 1rem;"></h2>
<p id="carousel-desc" style="white-space: pre-line; margin: 0.5rem 0 1rem;"></p>
<a id="carousel-demo" href="#" target="_blank" style="display: inline-block; margin-bottom: 1rem; padding: 10px 20px; background: #333; color: #fff; text-decoration: none; border-radius: 8px;">Ver demo</a>
<div>
<button onclick="prevSlide()" style="margin-right: 10px;">← Anterior</button>
<button onclick="nextSlide()">Siguiente →</button>
</div>
</div>
<script>
const slides = [
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287765/Main-Image_gpgvkn.webp",
title: "Invest Boost",
description: "Invest Boost es una plantilla de inicio sencilla, moderna y muy potente. Con un diseño limpio e intuitivo, te ofrece el empujón que necesitas para poner en marcha tu próximo sitio web.\n\nEsta plantilla incluye funciones avanzadas, como un menú lateral oculto para mostrar contenido adicional y un sistema de mega menú que convierte una navegación básica en una experiencia interactiva y atractiva.",
demo: "https://startersites.io/blocksy/investboost/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287765/Main-Image_1_u0wvte.webp",
title: "Kiddy",
description: "Kiddy es una divertida y minimalista tienda WooCommerce de moda infantil, que incluye filtros avanzados, comparaciones de productos y una experiencia de compra fluida.",
demo: "https://startersites.io/blocksy/kiddy/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_2_uxavdu.webp",
title: "Consultor",
description: "La plantilla 'Consultor' incluye una página de servicios y un módulo de reserva de reuniones, perfecta para mostrar tu experiencia y facilitar la programación de citas con los clientes.",
demo: "https://startersites.io/blocksy/consultant/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_3_fnokij.webp",
title: "Mobiliario",
description: "Mobiliario ofrece un diseño elegante y sereno para una tienda online de muebles con estilo. Incluye filtros, listas de deseos y herramientas de comparación para que la experiencia de compra sea sencilla y cómoda.",
demo: "https://startersites.io/blocksy/furniture/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_4_pszy1e.webp",
title: "E-Bike",
description: "E-Bike presenta un diseño vibrante con detalles dorados, perfecto para tiendas de viajes de aventura. También incluye potentes funcionalidades de comercio electrónico, como filtros y muestras de variaciones de productos.",
demo: "https://startersites.io/blocksy/e-bike/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_5_g0p6fq.webp",
title: "Cerámica",
description: "Cerámica ofrece un diseño visualmente atractivo con una paleta de colores oscuros y toques suaves, ideal para mostrar artículos artesanales con elegancia.",
demo: "https://startersites.io/blocksy/pottery/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_6_i27q5n.webp",
title: "Sonrisa Dental",
description: "Sonrisa Dental ofrece un diseño alegre con colores pastel y elementos redondeados para mostrar los servicios dentales con claridad y atractivo.",
demo: "https://startersites.io/blocksy/smile-dent/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_7_kef6vk.webp",
title: "Smart Home",
description: "Smart Home presenta un diseño sofisticado con tonos oscuros y un cambio de color, mejorando la interacción del usuario con un sistema de menú dinámico y funcional.",
demo: "https://startersites.io/blocksy/smart-home/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image-2_r9a5ff.webp",
title: "Noticias Diarias",
description: "Noticias Diarias ofrece un diseño estilo revista con modo oscuro, soporte multilingüe y visuales llamativos para cautivar a los lectores y presentar el contenido de manera efectiva.",
demo: "https://startersites.io/blocksy/daily-news/"
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287763/Main-Image-1_mwv7fy.webp",
title: "Cosméticos",
description: "Cosméticos ofrece un diseño elegante para tiendas de belleza, con maquetaciones centradas en los productos, funcionalidad de listas de deseos, tablas de comparación y filtros efectivos para la tienda.",
demo: "https://startersites.io/blocksy/cosmetic/"
}
];
let currentIndex = 0;
function showSlide(index) {
const item = slides[index];
document.getElementById("carousel-img").src = item.src;
document.getElementById("carousel-title").textContent = item.title;
document.getElementById("carousel-desc").textContent = item.description;
document.getElementById("carousel-demo").href = item.demo;
}
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
// Initialize
showSlide(currentIndex);
</script><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería Flotante</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #e0e0e0;
font-family: Arial, sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
}
.gallery-container {
position: relative;
width: 100%;
max-width: 800px;
background: #0074D9;
border-radius: 20px;
padding: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
text-align: center;
}
.gallery-image {
width: 100%;
max-height: 400px;
object-fit: contain;
border-radius: 10px;
transition: transform 1s ease, opacity 1s ease;
opacity: 1;
cursor: pointer;
}
.next-button {
position: absolute;
top: 10px;
right: 10px;
background: #FF4136;
color: white;
border: none;
padding: 10px 16px;
cursor: pointer;
border-radius: 30px;
font-size: 16px;
font-weight: bold;
}
.crazy-effect {
animation: spin 1s ease-in-out;
}
@keyframes spin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(720deg) scale(1.2); }
100% { transform: rotate(1440deg) scale(1); }
}
.description {
margin-top: 1rem;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<main>
<div class="gallery-container">
<button class="next-button" onclick="nextImage()">🔁 Siguiente</button>
<a id="galleryLink" href="" target="_blank" rel="noopener noreferrer">
<img id="galleryImage" class="gallery-image" src="" alt="Plantilla">
</a>
<div id="galleryDescription" class="description"></div>
</div>
</main>
<script>
const images = [
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287765/Main-Image_gpgvkn.webp",
link: "https://startersites.io/blocksy/investboost/",
description: "Invest Boost: Plantilla sencilla, moderna y potente con menú lateral oculto y mega menú."
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287765/Main-Image_1_u0wvte.webp",
link: "https://startersites.io/blocksy/kiddy/",
description: "Kiddy: Tienda WooCommerce infantil minimalista con filtros avanzados y comparaciones."
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_2_uxavdu.webp",
link: "https://startersites.io/blocksy/consultant/",
description: "Consultor: Plantilla con módulo de reservas y página de servicios para profesionales."
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_3_fnokij.webp",
link: "https://startersites.io/blocksy/furniture/",
description: "Mobiliario: Diseño elegante para tiendas de muebles, con filtros y listas de deseos."
},
{
src: "https://res.cloudinary.com/dcozy7wfi/image/upload/v1744287764/Main-Image_4_pszy1e.webp",
link: "https://startersites.io/blocksy/e-bike/",
description: "E-Bike: Plantilla vibrante para tiendas de aventura, con funcionalidades e-commerce."
}
];
let currentIndex = 0;
function showImage(index) {
const img = document.getElementById('galleryImage');
const link = document.getElementById('galleryLink');
const desc = document.getElementById('galleryDescription');
img.classList.remove('crazy-effect');
void img.offsetWidth; // Trigger reflow
img.classList.add('crazy-effect');
img.src = images[index].src;
link.href = images[index].link;
desc.textContent = images[index].description;
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
window.onload = () => showImage(currentIndex);
</script>
</body>
</html>Soluciones Digitales
Impulsa tu negocio con sitios web innovadores, estrategias de marketing digital y comercio electrónico eficiente.
🖥️ Diseño Web
Creamos páginas web profesionales adaptadas a las necesidades de tu negocio.
📊 Marketing Digital
Estrategias efectivas para aumentar tu presencia online y atraer más clientes.
🛒 Comercio Electrónico
Tiendas online seguras y optimizadas para potenciar tus ventas en línea.
Descubre más desde Clasenet
Suscríbete y recibe las últimas entradas en tu correo electrónico.
