A la galeria d’ArtChieve podràs trobar algunes de les obres més destacades dels nostres artistes. Connecta amb els autors gràcies als dissenys i estils variats que et faran veure l’art desde punts de vista diferents, ja sigui per les seves temàtiques, models de creació o missatge.
Disseny d’events esportius by Sergi Escarré
Mockups del nostre disseny de banc per la ciutat de Lleida
Ilustracions artístiques by Alba Morillo
.slider-container {
max-width: 800px;
height: 350px;
margin: 40px auto;
position: relative;
overflow: hidden;
border-radius: 15px;
background: #000; /* fondo oscuro para mejor contraste si hay espacio vacío */
}
.slider-track {
display: flex;
width: 500%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slider-track img {
width: 100%;
height: 100%;
flex: 0 0 100%;
object-fit: contain;
}
.slider-controls {
text-align: center;
margin-top: 15px;
}
.slider-dot {
height: 12px;
width: 12px;
margin: 0 6px;
background-color: #ccc;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.slider-dot.active {
background-color: #333;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
background: rgba(0,0,0,0.4);
border-radius: 50%;
padding: 10px;
cursor: pointer;
z-index: 10;
user-select: none;
}
.slider-arrow.left {
left: 10px;
}
.slider-arrow.right {
right: 10px;
}
.slider-arrow:hover {
background: rgba(0,0,0,0.7);
}
document.addEventListener(“DOMContentLoaded”, function () {
let currentSlideIndex = 0;
const track = document.getElementById(“sliderTrack”);
const dots = document.querySelectorAll(“.slider-dot”);
const totalSlides = track.children.length;
function updateSlider() {
const offset = -currentSlideIndex * 100;
track.style.transform = `translateX(${offset}%)`;
dots.forEach(dot => dot.classList.remove(“active”));
dots[currentSlideIndex].classList.add(“active”);
}
window.goToSlide = function(index) {
currentSlideIndex = index;
updateSlider();
}
window.nextSlide = function() {
currentSlideIndex = (currentSlideIndex + 1) % totalSlides;
updateSlider();
}
window.prevSlide = function() {
currentSlideIndex = (currentSlideIndex – 1 + totalSlides) % totalSlides;
updateSlider();
}
updateSlider();
setInterval(() => {
nextSlide();
}, 5000);
});
