Sure, here's a small HTML code with CSS to demonstrate the topic of "Product Photography 360 Handbag Spin":
HTML:
html
Product Photography 360 Handbag Spin
CSS (styles.css):
css
.product-photography {
text-align: center;
}
.product-images {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.product-images img {
width: 200px;
height: 200px;
margin: 0 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
JavaScript (script.js):
javascript
let currentImageIndex = 0;
const images = document.querySelectorAll('#productImages img');
function spinProduct() {
if (currentImageIndex === images.length - 1) {
currentImageIndex = 0;
} else {
currentImageIndex++;
}
images.forEach((image, index) => {
if (index === currentImageIndex) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}