Boost 2.3.2 карусель Internet Explorer изображения обратно в исходный размер при переходе

Я реализовал слайд-шоу с загрузочной каруселью. Он отлично работает в Chrome, но не в Internet Explorer.

Когда изображения выдвигаются за пределы поля зрения, изображение на секунду отображается как исходный размер. Конечно, когда окно браузера имеет очень узкий размер, это становится очень разрушительным.

Вы можете посмотреть здесь: http://websonalized.com/citec/

Для карусели у меня есть HTML-код:

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

Чтобы инициализировать карусель, JavaScript:

$('#frontpagecarousel').carousel({ interval: 4000, cycle: true });

Единственный стиль, примененный к контейнеру карусели

.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%;
}

Может кто-нибудь помочь мне разобраться, как исправить сбои в работе Internet Explorer?

Источник

4 ответа

Решение

Решение, предложенное Анри, побудило выяснить проблему, и, наконец, я нашел решение

CSS

.carousel.slide, .carousel.slide > div { width: 100%; }
Источник

Я испытываю ту же проблему. Прекрасно работает в Chrome, но не в IE10.

Во время перехода элементы слайда изменяются с этого:

<div class="item active">...</div>
<div class="item">...</div>
<div class="item">...</div>

к этому:

<div class="item active left">...</div>
<div class="item next left">...</div>
<div class="item">...</div>

Соответствующий bootstrap.css выглядит следующим образом:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}
.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0;
}
.carousel-inner > .active.left {
    left: -100%;
}
.carousel-inner > .active.right {
    left: 100%;
}

Установка "position: absolute; ... width: 100%" вызывает проблему в IE. Хотя для элемента назначен класс.next, изображение отображается с полной высотой и шириной (100%). После удаления перехода и класса.next изображение возвращается к своему относительному положению и масштабированным значениям.

Я нашел способ переопределить поведение, но оно не идеально. Я все еще вижу поведение на первом переходе, но потом все в порядке.

В случае слайда я установил ширину.next .item, равную.active, а в случае слайда установил обратно.active.item обратно на 100%.

<script type='text/javascript'>
$(document).ready(function() {
    $('.carousel').carousel({
        interval: 5000
    }).on('slide', function (event) {
        $(event.relatedTarget).width($(this).find('.active').width());
    }).on('slid', function (event) {
        $(this).find('.active').width('100%');
    });
});
</script>
Источник

Я испытываю ту же проблему. Прекрасно работает в Chrome, но не в IE10.

Во время перехода элементы слайда изменяются с этого:

<div class="item active">...</div>
<div class="item">...</div>
<div class="item">...</div>

к этому:

<div class="item active left">...</div>
<div class="item next left">...</div>
<div class="item">...</div>

Соответствующий bootstrap.css выглядит следующим образом:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}
.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0;
}
.carousel-inner > .active.left {
    left: -100%;
}
.carousel-inner > .active.right {
    left: 100%;
}

Установка "position: absolute; ... width: 100%" вызывает проблему в IE. Хотя для элемента назначен класс.next, изображение отображается с полной высотой и шириной (100%). После удаления перехода и класса.next изображение возвращается к своему относительному положению и масштабированным значениям.

Я нашел способ переопределить поведение, но оно не идеально. Я все еще вижу поведение на первом переходе, но потом все в порядке.

В случае слайда я установил ширину.next .item, равную.active, а в случае слайда установил обратно.active.item обратно на 100%.

<script type='text/javascript'>
$(document).ready(function() {
    $('.carousel').carousel({
        interval: 5000
    }).on('slide', function (event) {
        $(event.relatedTarget).width($(this).find('.active').width());
    }).on('slid', function (event) {
        $(this).find('.active').width('100%');
    });
});
</script>
Источник

У меня была та же проблема в IE11, но исправление, предложенное как решение, не сработало для меня. Но добавление ширины: 100% к этим классам помогло мне.

.carousel-inner > .active.left {
  left: -100%;
  width: 100%;
}
.carousel-inner > .active.right {
  left: 100%;
  width: 100%;
}

Надеюсь, это кому-нибудь поможет.

Источник
Другие вопросы по тегам