Para crear una galería con divs ocultos y paginación, puedes seguir estos pasos:
1. Crea un contenedor principal llamado "galería", utilizando un elemento div y asignándole un id "galeríax".
```html
<div id="galeríax">
</div>
```
2. Crea los 37 divs ocultos dentro del contenedor de la galería, usando la etiqueta div con una clase "slide" para que puedas seleccionarlos con CSS y JavaScript.
```html
<div id="galeríax">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
.
.
.
<div class="slide">Slide 37</div>
</div>
```
3. Oculta todos los divs de la galería excepto el primer div, utilizando CSS.
```css
.slide {
display: none;
}
.slide:first-child {
display: block;
}
```
4. Agrega la paginación utilizando elementos HTML como botones para siguiente y anterior y una lista de números para cada diapositiva. Agrega clases y atributos a cada elemento, para poder seleccionarlos con JavaScript más tarde.
```html
<div id="galeríax">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
.
.
.
<div class="slide">Slide 37</div>
<div class="pagination">
<button class="prev">Anterior</button>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
.
.
.
<li>37</li>
</ul>
<button class="next">Siguiente</button>
</div>
</div>
```
5. Agrega el código JavaScript para controlar la paginación y mostrar las diferentes diapositivas.
```javascript
const slides = document.querySelectorAll('.slide');
const pagination = document.querySelector('.pagination');
const prevBtn = pagination.querySelector('.prev');
const nextBtn = pagination.querySelector('.next');
const dots = pagination.querySelectorAll('li');
let currentSlide = 0;
function showSlide(){
slides.forEach(slide => {
slide.style.display = 'none';
});
slides[currentSlide].style.display = 'block';
dots.forEach(dot => {
dot.classList.remove('active');
});
dots[currentSlide].classList.add('active');
}
function nextSlide(){
currentSlide++;
if(currentSlide >= slides.length){
currentSlide = 0;
}
showSlide();
}
function prevSlide(){
currentSlide--;
if(currentSlide < 0){
currentSlide = slides.length - 1;
}
showSlide();
}
function setSlide(n){
currentSlide = n;
showSlide();
}
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
setSlide(index);
});
});
```
Este código creará una galería de diapositivas ocultas con paginación que cambiará a través de los botones "Siguiente" y "Anterior" y los números de paginación al hacer clic en ellos. Simplemente ajusta el contenido de los divs según tus necesidades y personaliza el CSS y JS a tu gusto.
