1

Quiero que aparezcan las últimas 3 noticias de mi base de datos en un slider pero en vez de hacer eso me crea un slider diferente para cada noticia. Os pongo mi código:

<?php
include 'config.php';

if(isset($_GET['noticia'])) 
{ 
    if(!empty($_GET['noticia'])) 
    { 
        $id_noticia = (int) mysqli_real_escape_string($mysqli,$_GET['noticia']); 
        $query_noticias = mysqli_query($mysqli,"SELECT titulo, ruta_imagen FROM ".$NOTICIAS." WHERE id = '".$id_noticia."' LIMIT 3"); 

    } 
    else 
    { 
        echo 'Debes seleccionar una noticia.'; 
    } 
} 
else 
{ 
    $query_noticias = mysqli_query($mysqli,"SELECT * FROM ".$NOTICIAS.""); 

    while($columna = mysqli_fetch_assoc($query_noticias))
    { 

?>  

<div id="slider" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="<?php echo $columna['ruta_imagen']?>" alt="First slide">
        <div class="carousel-caption">
            <h3><?php echo $columna['titulo']?></h3>
        </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="<?php echo $columna['ruta_imagen']?>" alt="Second slide">
        <div class="carousel-caption">
            <h3><?php echo $columna['titulo']?></h3>
        </div>    
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="<?php echo $columna['ruta_imagen']?>" alt="Third slide">
        <div class="carousel-caption">
            <h3><?php echo $columna['titulo']?></h3>
        </div>    
    </div>
  </div>
  <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>

<?
}}
?>

Gracias de antemano.

1 respuesta 1

0

1ro . Identificar los componentes del slider

a) contenedor del slider

<div id="slider" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">

b) GRUPO 1 lista de slides 1 LI por cada slide (el primero lleva class="active")

    <li data-target="#slider" data-slide-to="0" class="active"></li>

c) cierre GRUPO 1 abre GRUPO 2

  </ol>
  <div class="carousel-inner" role="listbox">

d) GRUPO 2 los items (slides) uno por cada imagen (el primero lleva class="active")

    <div class="carousel-item active">
      <img class="d-block img-fluid" 
           src="<?php echo $columna['ruta_imagen']?>" 
           alt="First slide">
        <div class="carousel-caption">
            <h3><?php echo $columna['titulo']?></h3>
        </div>
    </div>

e) cierre del área slides y controles de navegación

  </div>
  <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>

2do . como hay 2 GRUPOS para armar reformulamos el whileque recorre los resultados asi los guarda en un array

    while($columna = mysqli_fetch_assoc($query_noticias))

pasa a ser

    $imagenes = []; // array vacío
    while($columna = mysqli_fetch_assoc($query_noticias))
    {
        $imagenes[] = $columna; 
        // en realidad es una fila(row) pero mantengo el nombre del ejemplo
    }

luego comprobamos que haya imagenes

    if (!empty($imagenes)) {

imprimimos la cabecera

?>
<div id="slider" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
 <?php

loop de imagenes para GRUPO 1 ($i hace de índice y se usa para saber si es la primer slide)

   $i = 0;
   foreach ($imagenes as $imagen) { ?>
<li data-target="#slider" 
    data-slide-to="<?php echo $i;?>" 
    <?php echo ($i==0)?'class="active"':'';?>></li>
   <?php $i++; } ?>

cierro GRUPO 1 abro GRUPO 2

  </ol>
  <div class="carousel-inner" role="listbox">

loop de imagenes para GRUPO 2 ($i hace de índice y se usa para saber si es la primer slide)

   $i = 0;
   foreach ($imagenes as $imagen) { ?>

    <div class="carousel-item<?php echo ($i==0)?' active':'';?>">
      <img class="d-block img-fluid" 
           src="<?php echo $imagen['ruta_imagen']?>" 
           alt="<?php echo $imagen['titulo']?>">
        <div class="carousel-caption">
            <h3><?php echo $imagen['titulo']?></h3>
        </div>
    </div>
   <?php $i++; } ?>

por último cierre del area slides, controles de navegación y el if not empty

  </div>
  <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>
<?php } ?>
1
  • perfectamente explicado y funciona al 100%. Muchas gracias por la ayuda. Un saludo.
    – Pablo
    el 28 abr. 2018 a las 20:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.