0

Estoy haciendo un carousel fade de bootstrap pero al pasar la imagen como que se acomoda, he intentado borrar divs cambierle diferentes estilos y nada funciona, les voy a pasar la url ya que no es posible subir videos, le agradezco si me pueden ayudar. http://seadoglabs.com/iq/pru/

Es en la parte derecha, esas imagenes rotan.

aqui van dos pantallazos para vean igual en la url se ve mejor.

No se si se alcance a ver aqui pero en esta imagen apenas se va a acomodar despues de cambiar la imagen del carousel. introducir la descripción de la imagen aquí

Y en esta ya se acomodo introducir la descripción de la imagen aquí

codigos: view:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="8350">
    <div class="carousel-fade carousel-congratulations">
      <!-- AQUI VAN LAS FELICITACIONES -->
      <div id="contenedor">
        <div class="loader" id="loader">Loading...</div>
      </div>
    </div>
  </div>

Js(sube lo que se obtiene del controller)

function realizaProceso(){
  var parametros = {};
  $.ajax({
    data:  parametros,
    url:   'controller/index.php',
    type:  'post',
    dataType: 'json',
    beforeSend: function () {
    },
    error: function (request, status, error) {
         console.log(request);
         console.log(status);
         console.log(error);
    },
    success:  function (response) {
      $(".loader").hide();
      $(".carousel-congratulations").html(response.congratulations);
      window.history.pushState("", "", '/iq/pru/');
    }
  });
}

Controller:

       $sentencia = $con->prepare("SELECT * FROM congratulations ORDER BY id ASC;");
    $sentencia->execute([1]);
    $result = $sentencia->fetchAll(PDO::FETCH_OBJ);
    $estado ="active";
    $congratulations = "<div class='container'>";
    /*$congratulations = '<div class="carousel-item '.$estado.'">';
    $congratulations .= '<div class="not-item">';
    $congratulations .= '<img src="admin/images/congratulation/'.$picture->congratulation.'" />';
    $congratulations .= '</div></div>';*/
    $contador=0;
    //$estado="";
    foreach($result as $fila) {
        $congratulations .= '<div class="carousel-item '.$estado.'" style="background: transparent;">';
        $estado="";
        $col_image=($fila->image==NULL) ? "default.png" : "felicitaciones/homenajeado".$fila->id."/".$fila->image ;
        $col_title=$fila->title;
        $col_detail=$fila->detail;
        $congratulations .= '<div class="card" style="background: transparent;">';
        $congratulations .= '<div class="card-body">';
        $congratulations .= '<p class="card-title">'.$col_title.'</p>';
        if( $col_title!=="<!--Empty-->")
            $congratulations .= '<p class="card-card-text">'.$col_detail.'</p>';
        $congratulations .= '<div class="img-cum fleft sin-border"><img class="img-l" src="admin/images/'.$col_image.'" style="'.$fila->css.'"/></div>';
        $congratulations .= '</div></div></div>';
        $contador++;
    }
    $congratulations .= '</div>';
header("Content-type: application/json; charset=utf-8");

//Guardamos los datos en un array
$datos = array(
'congratulations' => $congratulations
);

echo json_encode($datos, JSON_FORCE_OBJECT);

en las imagenes miren que el contenedor tiene un borde negro con eso se ve cuando se esta acomodando la imagen, en el sitio si se nota bien.

1 respuesta 1

1

En tus estilos CSS cambia esto:

.carousel {
    position: relative;
}

Por esto:

.carousel {
    position: absolute;
}

Luego debes acomodar el div class="gal" dentro del div class="todos-t fleft" para que se ubique debajo del texto IQ para todos

0

Tu Respuesta

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

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