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 /
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
0
