HTML - Problema desplegando la primer imagen en mi Carousel Bootstrap slider.

 
Vista:
Imágen de perfil de Omar
Val: 2
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema desplegando la primer imagen en mi Carousel Bootstrap slider.

Publicado por Omar (1 intervención) el 14/07/2020 20:01:45
Hi to the comunity, I'm trying to implement of my firsts carousel animation for slide images on my page. I'm retaking a project from other guy, and i'm not really familliarized with the framework and the coding style he has.
I'm trying to understand why the first slide isnt showing, it appears a couple of ms and then just dissapear just remaining the background, but the rest of slides appear correctly.

Hola a toda la comunidad, estoy tratando de implementar uno de mis primeras animaciones sliders con imagenes. De hecho estoy retomando el proyecto de otra persona y no estoy muy familiarizado con este framework y el estilo de programar de el.
Intento entender por que el primer slide no se muestra correctamente, aparece un par de mili segundos y desaparece rápidamente, quedando únicamente el fondo, las demás imágenes y títulos de los otros slides se despliegan correctamente.

Las imágenes son llamadas desde una base de datos sql que contiene los path y los títulos:

slider_dp = images
title_slider = titles
sub_slider = subtitles

Los nombres de las imagenes son correctos:
slider-1.jpg /
slider-2.jpg /
slider-3.jpg /
slider-4.jpg /
slider-5.jpg /



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
<!-- Slider -->
<div id="slider-main" class="overflow-hidden bg-color-primary">
   <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
         <?php
            $i = 0; $j = 1;
            $res = $sql -> ConsultaBD( "SELECT * FROM slider_dp" );
            while(  $row = mysqli_fetch_array($res) ){
 
 
              if ( $i < 1 ) {
 
 
                echo '<div class="carousel-item active">'.
                      '<div class="'. 'slider-img-'.$j. ' ' . 'anime-slider' .'"></div>'.
                        '<div class="carousel-caption d-block">'.
                          '<h2 class="h1 text-uppercase monopoly-bold animated fadeInLeft letter-space" style="animation-delay: 0.3s">'. utf8_encode( $row['title_slider'] ) .'</h2>'.
 
 
                          '<p class="lead animated fadeInUp" style="animation-delay: 0.6s">'. utf8_encode($row['sub_slider']) .'</p>'.
 
 
                          '<a href="'. utf8_encode($row['link_slider']) .'" class="btn-colore text-uppercase animated fadeInDown" style="animation-delay: 1.1s">Ver más</a>'.
 
 
                        '</div>'.
                      '</div>';
                      $i++;
                      $j++;
              }
              else{
                echo '<div class="carousel-item">'.
                        '<div class="'. 'slider-img-'.$j. ' ' . 'anime-slider' .'"></div>'.
                        '<div class="carousel-caption d-block">'.
                          '<h2 class="h1 text-uppercase monopoly-bold animated fadeInLeft letter-space" style="animation-delay: 0.3s">'. utf8_encode( $row['title_slider'] ) .'</h2>'.
                          '<p class="lead animated fadeInUp" style="animation-delay: 0.6s">'. utf8_encode($row['sub_slider']) .'</p>'.
                          '<a href="'. utf8_encode($row['link_slider']) .'" class="btn-colore text-uppercase animated fadeInUp" style="animation-delay: 1.1s">Ver más</a>'.
                        '</div>'.
                      '</div>';
                      $j++;
                }
              }
            ?>
      </div>
      <div class="d-none d-sm-none d-md-block d-lg-block">
         <ol class="carousel-indicators">
            <?php
               $i = 0;
               $res = $sql -> ConsultaBD( "SELECT * FROM slider_dp" );
               while(  $row = mysqli_fetch_array($res) ){
                 if( $i < 1 ){
                   echo '<li data-target="#carouselExampleCaptions" data-slide-to="'.$i.'" class="active"></li>';
                   $i++;
                 }
                 else{
                   echo '<li data-target="#carouselExampleCaptions" data-slide-to="'.$i.'"></li>';
                   $i++;
                 }
               }
               ?>
         </ol>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
      </a>
   </div>
</div>
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 Lopez
Val: 861
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema desplegando la primer imagen en mi Carousel Bootstrap slider.

Publicado por Lopez (266 intervenciones) el 16/07/2020 16:48:24
Hola Omar,

El IF tan amplio es innecesario. Según entiendo, estas teniendo el problema setteando la clase 'active' al primer registro.
La comprobación deberías hacerla solo en ese atributo (clase).
Si necesitas aun ayuda, replica este tema.
Saludos!
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