Shop List
.shop-card {
width: 150px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
margin: 15px;
text-align: center;
font-family: sans-serif;
}
.slider {
position: relative;
height: 150px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 150px;
object-fit: cover;
display: none;
}
.slider img.active {
display: block;
}
.shop-name {
padding: 15px 10px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.shop-name a {
color: black;
text-decoration: none;
}
.shop-name a:hover {
text-decoration: underline;
}
.slider-dots {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.dot {
width: 8px;
height: 8px;
background: #bbb;
border-radius: 50%;
cursor: pointer;
}
.dot.active {
background: black;
}
document.querySelectorAll(‘[data-slider]’).forEach(slider => {
const images = slider.querySelectorAll(‘img’);
const dotsContainer = slider.querySelector(‘.slider-dots’);
let index = 0;
images.forEach((_, i) => {
const dot = document.createElement(‘div’);
dot.classList.add(‘dot’);
if (i === 0) dot.classList.add(‘active’);
dot.addEventListener(‘click’, () => {
images[index].classList.remove(‘active’);
dotsContainer.children[index].classList.remove(‘active’);
index = i;
images[index].classList.add(‘active’);
dotsContainer.children[index].classList.add(‘active’);
});
dotsContainer.appendChild(dot);
});
// Optional: Auto-slide
const autoSlide = () => {
images[index].classList.remove(‘active’);
dotsContainer.children[index].classList.remove(‘active’);
index = (index + 1) % images.length;
images[index].classList.add(‘active’);
dotsContainer.children[index].classList.add(‘active’);
};
setInterval(autoSlide, 2000);
});
