Estoy usando este plugin muy sencillo de usar, que sirve para crear cualquier tipo de carousel con etiquetas HTML.
El caso es que lo estoy usando en 3 páginas distintas (y funciona todo perfectamente), pero sin embargo cuando lo implemento en una ventana modal, éste mismo ni aparece y en las demás páginas que funciona, el estilo de fondo lo elimina. He visto que si lo quito del modal, vuelven a funcionar los demás perfectamente.
¿A qué es debido esto? Os dejo el código del carousel de la ventana modal:
<section id="rotatorio" class="section text-center">
<div class="row">
<?php
$siTieneCreditos = "SELECT * FROM tbl_credito WHERE id_user =".$_SESSION['id_usuario'];
$resultadoSiTieneCreditos = mysqli_query($conexion,$siTieneCreditos);
$rowSiTieneCreditos = mysqli_fetch_array($resultadoSiTieneCreditos);
$creditosDisponibles = $rowSiTieneCreditos["creditos"];
if($creditosDisponibles >= 100){
?>
<a class="button radius left btn-foco-chat" href="?seccion=banner">
<?php
}else{
?>
<a class="button radius left btn-foco-chat" href="?seccion=creditos">
<?php
}
?>
<img width="20" class="icon-ponmeaqui" src="img/ponmeaqui.png"> Ponme aquí
</a>
<div class="carousel-rotativo-chat responsive radius">
<div class="caroufredsel_wrapper">
<ul id="rotativo-thumbs">
<?php
$sqlBanner = "SELECT * FROM T_BANNER";
$resultadoBanner = mysqli_query($conexion,$sqlBanner);
while($rowBanner = mysqli_fetch_array($resultadoBanner)){
$fechaFinCiclo = date('Y-m-d H:i:s');
$fechaFinBanner = $rowBanner["FECHA_FIN"];
if(strtotime($fechaFinCiclo) <= strtotime($fechaFinBanner)){
$sqlBannerUsuario = "SELECT * FROM T_USUARIOS WHERE ID =".$rowBanner["ID_USER"];
$resultadoBannerUsuario = mysqli_query($conexion,$sqlBannerUsuario);
while($rowBannerUsuario = mysqli_fetch_array($resultadoBannerUsuario)){
?>
<li class="status">
<a class="rotatorio-enlace" href="http://aliquapp.com/chatiic/?seccion=miembros&id=<?php echo $rowBannerUsuario['ID']; ?>">
<?php if($rowBannerUsuario["SEXO"]=="Hombre"){ ?>
<img src="http://aliquapp.com/chatiic/uploads/avatars/<?php echo $rowBannerUsuario['ID']; ?>/<?php echo $rowBannerUsuario['FOTO_PERFIL']; ?>" class="avatar-hombre user-<?php echo $rowBannerUsuario['ID']; ?>-avatar avatar-120 photo" width="120" height="120" alt="Imagen de avatar">
<?php }else{ ?>
<img src="http://aliquapp.com/chatiic/uploads/avatars/<?php echo $rowBannerUsuario['ID']; ?>/<?php echo $rowBannerUsuario['FOTO_PERFIL']; ?>" class="avatar-mujer user-<?php echo $rowBannerUsuario['ID']; ?>-avatar avatar-120 photo" width="120" height="120" alt="Imagen de avatar">
<?php } ?>
</a>
</li>
<?php
}
}
}
?>
</ul>
</div><!-- /.caroufredsel_wrapper -->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#rotativo-thumbs').carouFredSel({
width: '750',
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
},
scroll: {
items: 1,
duration: 500,
fx: "directscroll",
},
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
},
prev : {
button : "#rotativo-thumbs-prev",
key : "left"
},
next : {
button : "#rotativo-thumbs-next",
key : "right"
},
pagination : "#rotativo-thumbs-pag",
items: {
visible: {
min: 6,
max: 6 }
}
});
});
</script>
</div><!-- /.carousel-rotativo-grupo-surja -->
</div><!-- /.row -->
</section><!-- /#rotatorio -->
</div>