Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Llenar carousel con javascript

JavaScript - Llenar carousel con javascript

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Paula
Val: 34
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Llenar carousel con javascript

Publicado por Paula (7 intervenciones) el 27/04/2021 22:03:40
hola, tengo un carousel en html y lo quiero llenar con javascript, el problema es que no me lo pone en el carousel, si alguien puede ayudarme.
código html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<section id="producto-destacado" class="d-none">
    <div
      id="carouselExampleInterval"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleInterval"
        role="button"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleInterval"
        role="button"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>
</section>

código javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<section id="producto-destacado" class="d-none">
    <div
      id="carouselExampleInterval"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="carousel-item-container">
            <h3 class="carousel-item-title"></h3>
            <img
              src=""
              class="carousel-item-img"
              alt=""
            />
            <div class="carousel-options">
              <p class="precio"></p>
              <button class="btn btn-buy" id="comprar">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleInterval"
        role="button"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleInterval"
        role="button"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>
</section>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Llenar carousel con javascript

Publicado por joel (895 intervenciones) el 28/04/2021 08:24:49
Hola Paula, los dos códigos son idénticos, tanto el de html como el de javascript!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Paula
Val: 34
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Llenar carousel con javascript

Publicado por Paula (7 intervenciones) el 28/04/2021 16:19:17
mandé malll, ya mando el javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const FetchCarousel = async ()=>{
    try {
        const res = await fetch("https://fakestoreapi.com/products?limit=3")
        const data = await res.json()
 
        function llenarCarousel(){
            data.forEach(producto => {
                let contenedor = document.createElement("div")
                    contenedor.classList.add("carousel-item")
                let contenedorHijo = document.createElement("div")
                contenedorHijo.classList.add("carousel-item-container")
 
                    let img = document.createElement("img")
                    img.setAttribute("src", producto.image)
                    img.classList.add("carousel-item-img")
                    console.log(img)
 
                    let title = document.createElement("h")
                    title.innerHTML = producto.title
                    title.classList.add("carousel-titem-title")
 
                    let containerOptions = document.createElement("div")
                    containerOptions.classList.add("carousel-options")
 
                    let precio = document.createElement("p")
                    precio.innerHTML = `$${producto.price}`
                    precio.classList.add("precio")
 
                    let btnBuy = document.createElement("button")
                    btnBuy.classList.add("btn", "btn-buy")
                    btnBuy.innerHTML= `<i class="fas fa-shopping-cart"></i>`
 
                    contenedorHijo.appendChild(title)
                    contenedorHijo.appendChild(img)
                    containerOptions.appendChild(precio, btnBuy)
                    contenedorHijo.appendChild(containerOptions)
 
                document.querySelector(".carousel-inner").appendChild(contenedorHijo)
            });
        }
 
        llenarCarousel()
    } catch (error) {
        console.log(error)
    }
}
FetchCarousel()
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Paula
Val: 34
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Llenar carousel con javascript

Publicado por Paula (7 intervenciones) el 28/04/2021 23:37:00
Ya solucioné cambiando el código por:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const FetchCarousel = async ()=>{
    try {
        const res = await fetch("https://fakestoreapi.com/products?limit=3")
        const data = await res.json()
 
        function llenarCarousel(){
            data.forEach(producto => {
                let contenedor = document.querySelectorAll ('.carousel-item-container');
                let title = document.querySelector('.carousel-item-title');
                let img = document.querySelector('.carousel-item-img');
                let precio = document.querySelector('.precio');
 
                title.innerHTML = producto.title;
                title.classList.add("carousel-titem-title");
 
                img.setAttribute("src", producto.image);
                img.classList.add("carousel-item-img");
 
                precio.innerHTML = `$${producto.price}`;
                precio.classList.add("precio");
 
                btnBuy.classList.add("btn", "btn-buy");
                btnBuy.innerHTML= `<i class="fas fa-shopping-cart"></i>`;

pero sólo me agega uno y no los 3 que necesito.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar