Chat GPT: Crear un slider con Swiper en una landing page de Genesis Framework

Acabo de crear un slider con chat gpt en una landing page en Genesis Framework. Pude configurar el slider añadiendo el html del slider en la plantilla de una landing page. Todo el código html ahí, incluyendo las librerías de swiper y su inicialización. Y el css obviamente en la hoja de estilos. Ni siquiera es necesario cargar las librerías de swiper o su inicialización en el functions.php. Se puede poner en el html de la landing page y funciona. En mi caso el proceso se estancó cuando el slider no se movía. A chat GPT se le olvidó decirme que la inicialización de swiper debe ser después del html del contenido que se va a deslizar, NO ANTES!!! Swiper necesita los datos del html con el que va a trabajar para poder funcionar correctamente. Eso es algo que Chat GPT no me mencionó y que lo descubrí por accidente.

En caso que a alguien le interese ese es el HTML que hay que poner en la landing page para generar un slider de 3 pasos con una imagen en cada uno y un texto abajo de cada uno:

Insertar CODE, HTML o PHP:

 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/600x400.png?text=Slide+1" alt="Slide 1">
      <p class="caption">Texto del slide 1</p>
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/600x400.png?text=Slide+2" alt="Slide 2">
      <p class="caption">Texto del slide 2</p>
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/600x400.png?text=Slide+3" alt="Slide 3">
      <p class="caption">Texto del slide 3</p>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>


 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

Este es el CSS que va en la hoja de estilos:

Insertar CODE, HTML o PHP:

.swiper-container {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

.swiper-slide {
  width: 100%;
  height: 400px;
  text-align: center;
}

.swiper-slide img {
  max-width: 100%;
  height: auto;
}

.swiper-pagination {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  z-index: 10;
  cursor: pointer;
  background-image: url('https://swiperjs.com/demos/images/icons/prev.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.swiper-button-next {
  right: 10px;
  background-image: url('https://swiperjs.com/demos/images/icons/next.png');
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Advierto que no soy developer, Chat GPT lo hizo todo. Yo no sé nada