Слайдер Bootstrap3 Почему при смене слайдов уменьшается высота слайдера?

Question

[Vadim1991]

Слайдер Bootstrap3 интегрирован в CMS joomla3. Слайдер работает. Но при смене первого слайда (видео) высота слайдера уменьшается до нуля. Через время загружается 3 слайд, второй слайд пропускается и так далее. Слайды нечетные показываются а четные нет. Демо https://hoper-it.ru/.

Answer 1

[Vadim1991]

<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><video autoplay="autoplay" muted="" width="1910" height="auto">
<source src="https://omecmotors.ru/images/video/DvigNEW.mp4" type="video/mp4" /></video></div>
<div class="item"><img class="d-block " src="https://omecmotors.ru/images/slide/OMEC-Banner-1210x400-0.jpg" width="100%" data-path="local-images:https://omecmotors.ru/images/slide/OMEC-Banner-1210x400-0.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/sklad-v-rf"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">СКЛАД В РФ</span></a></div>
</div>
<div class="item"><img class="d-block " src="https://omecmotors.ru/images/slide/OMEC-Banner2-1210x400-0.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/OMEC-Banner2-1210x400-0.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/omec-motors-prodolzhaet-rabotu"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">ВАЖНО</span></a></div>
</div>
<div class="item"><img class="d-block " src="https://omecmotors.ru/images/slide/products5-0-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/products5-0-1.jpg" />
<p style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/catalog"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">ПРОДУКЦИЯ</span></a></p>
</div>
<div class="item"><img class="d-block " src="https://omecmotors.ru/images/slide/otrasli1210400-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/otrasli1210400-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/otrasli"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">ОТРАСЛИ</span></a></div>
</div>
<div class="item"><img class="d-block" src="https://omecmotors.ru/images/slide/clients2-0-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/clients2-0-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/klienty"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">КЛИЕНТЫ</span></a></div>
</div>
<div class="item"><img class="d-block" src="https://omecmotors.ru/images/slide/distributors3-0-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/distributors3-0-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/dilery"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">ДИЛЕРЫ</span></a></div>
</div>
<div class="item"><img class="d-block" src="https://omecmotors.ru/images/slide/about1-0-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/about1-0-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/o-nas"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">О НАС</span></a></div>
</div>
<div class="item"><img class="d-block" src="https://omecmotors.ru/images/slide/servis1210400-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/servis1210400-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/servis"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">СЕРВИС</span></a></div>
</div>
<div class="item"><img class="d-block" src="https://omecmotors.ru/images/slide/new1210400-1.jpg" width="100%" height="auto" data-path="local-images:https://omecmotors.ru/images/slide/new1210400-1.jpg" />
<div style="position: absolute; z-index: 2; left: 80%; right: 0; top: 15%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: #091642; width: 20%; height: auto;"><a href="https://omecmotors.ru/o-nas/novosti"><span style="font-size: 32px; text-transform: uppercase; color: #fff; line-height: 1.5em; text-align: center;">НОВОСТИ</span></a></div>
</div>
</div>
<!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div>
</div>