I have implemented a slideshow with bootstrap carousel. It works fine in Chrome, but not on Internet Explorer.
When the images are sliding out of view, the image appears as the original size for a second. Of course, when the browser window is sized very narrow, this becomes very disruptive.
You can take a look here: http://websonalized.com/citec/
For the carousel, I have html code:
<div id="frontpagecarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="images/computer-lab.png" alt="Informática Administrativa" title="Informática Administrativa" />
<div class="module dark large hidden-phone">
<div class="heading">
Informática Administrativa
</div>
<div class="bodytext">
Aprende los programas y aplicaciones más usuales en actividades administrativas y educativas
</div>
<a class="btn" href="#">
Más Información
</a>
</div>
<a class="btn btn-inverse btn-large visible-medium" href="#">
Cursos de Informática Administrativa
<span class="block">Más Información</span>
</a>
<a class="btn btn-inverse btn-large visible-small" href="#">
Informática Administrativa
</a>
</div>
<div class="item">
<img src="images/curso-prepa-abierta.png" alt="Preparatoria Abierta" title="Preparatoria Abierta" />
<div class="module dark large hidden-phone">
<div class="heading">
Preparatoria Abierta
</div>
<div class="bodytext">
Termina tu bachillerato en 3 semestres o menos, y recibe tu certificado expedido por las SEP
</div>
<a class="btn" href="#">
Más Información
</a>
</div>
<a class="btn btn-danger btn-large visible-medium" href="#">
Clases Reales de Preparatoria Abierta
<span class="block">Más Información</span>
</a>
<a class="btn btn-danger btn-large visible-small" href="#">
Preparatoria Abierta
</a>
</div>
<div class="item">
<img src="images/informatica-contable.png" alt="Informática Contable" title="Informática Contable" />
<div class="module dark large hidden-phone">
<div class="heading">
Informática Contable
</div>
<div class="bodytext">
Destaca en funciones contables y fiscales: nomina, SUA, polizas, activo-pasivo-capital, impuestos, etc.
</div>
<a class="btn" href="#">
Más Información
</a>
</div>
<a class="btn btn-warning btn-large visible-medium" href="#">
Cursos de Informática Contable
<span class="block">Más Información</span></a>
<a class="btn btn-warning btn-large visible-small" href="#">
Informática Contable
</a>
</div>
<div class="item">
<img src="images/diseno-publicitario.png" alt="" />
<div class="module dark large hidden-phone">
<div class="heading">
Diseño Publicitario
</div>
<div class="bodytext">
Nosotros te ayudamos a darle vuelo a tu imaginación y te ensenamos a crear volantes, tarjetas de presentación, invitaciones, calendarios, y más
</div>
<a class="btn" href="#">
Más Información
</a>
</div>
<a class="btn btn-success btn-large visible-medium" href="#">
Aprende Diseño Publicitario
<span class="block">Más Información</span>
</a>
<a class="btn btn-success btn-large visible-small" href="#">
Diseño Publicitario
</a>
</div>
<div class="item">
<img src="images/ingles-conversar.png" alt="Inglés Conversacional" title="Inglés Conversacional" />
<div class="module dark large hidden-phone">
<div class="heading">
Inglés Conversacional
</div>
<div class="bodytext">
Aprende inglés en 3 cuatrimestres con nuestro nuevo método que es fácil y efectivo
</div>
<a class="btn" href="#">
Más Información
</a>
</div>
<a class="btn btn-primary btn-large visible-medium" href="#">
Curso Inovador y Efectivo de Inglés Conversacional <span class="block">Más Información</span>
</a>
<a class="btn btn-primary btn-large visible-small" href="#">
Inglés Conversacional
</a>
</div>
</div>
</div>
<p>
<a id="leftarrow" class="carousel-control left" href="#frontpagecarousel" data-slide="prev">
‹
</a>
<a id="rightarrow" class="carousel-control right" href="#frontpagecarousel" data-slide="next">
›
</a>
</p>
To initialize the carousel, javascript:
$('#frontpagecarousel').carousel({ interval: 4000, cycle: true });
The only styling applied to the container of the carousel
.showcase {
position: relative;
}
.carousel-inner > .item {
max-height: 532px;
}
.showcase div.module.dark {
position: absolute;
top: 40%;
left: 13%;
float: left;
border: solid 3px #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #414140;
-webkit-box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
-moz-box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
box-shadow: inset 0 0 54px rgba(33, 33, 32, 0.93);
color: #ffffff;
padding: 2%;
}
Could anybody help me figure out how to fix the internet explorer disruption?
The solution offered by Henri prompted to figure out the problem, and finally I found a solution
css
.carousel.slide, .carousel.slide > div { width: 100%; }