Carrusel multimedia (HTML avanzado)
Carrusel con dos o más vídeos
- Envolver el elemento
.swiper-container
en un elemento.mu-swiper-multimedia-outer-wrapper
- Añadir al elemento
.swiper-container
el classmu-swiper-multimedia
Copiar
<div class="mu-swiper-multimedia-outer-wrapper"> <div class="swiper-container mu-swiper-multimedia"> <div class="swiper-wrapper"> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vhj8Q_tqDjk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p><small>Contexto</small>Graduak spot-a</p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/oLlqb-k1BFo" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Asier Gallastegi sobre la dimension personal y organizacional<small>Contexto</small></p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z39m1ihSnJk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Richard Gerver-n hitzaldia</p> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- See all videos --> <a href="#" class="mu-swiper-see-all">Ver todos los vídeos</a> </div> </div>
Carrusel con un único vídeo
- Añadir al elemento
.swiper-pagination
el classinvisible
Copiar
<div class="mu-swiper-multimedia-outer-wrapper"> <div class="swiper-container mu-swiper-multimedia"> <div class="swiper-wrapper"> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/9guOWX89veQ" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>MUTB 247. erreportajea: Multidisciplinary Lab</p> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination invisible"></div> <!-- See all videos --> <a href="#" class="mu-swiper-see-all">Ver todos los vídeos</a> </div> </div>
Carruseles a dos columnas
Copiar
<div class="row"> <div class="col-xs-12 col-sm-6"> <div class="mu-swiper-multimedia-outer-wrapper"> <div class="swiper-container mu-swiper-multimedia"> <div class="swiper-wrapper"> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vhj8Q_tqDjk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p><small>Contexto</small>Graduak spot-a</p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/oLlqb-k1BFo" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Asier Gallastegi sobre la dimension personal y organizacional<small>Contexto</small></p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z39m1ihSnJk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Richard Gerver-n hitzaldia</p> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- See all videos --> <a href="#" class="mu-swiper-see-all">Ver todos los vídeos</a> </div> </div> </div> <div class="col-xs-12 visible-xs-block"> <p> </p> </div> <div class="col-xs-12 col-sm-6"> <div class="mu-swiper-multimedia-outer-wrapper"> <div class="swiper-container mu-swiper-multimedia"> <div class="swiper-wrapper"> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vhj8Q_tqDjk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p><small>Contexto</small>Graduak spot-a</p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/oLlqb-k1BFo" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Asier Gallastegi sobre la dimension personal y organizacional<small>Contexto</small></p> </div> </div> <div class="swiper-slide"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z39m1ihSnJk" frameborder="0" allowfullscreen></iframe> <div class="swiper-slide-footer"> <p>Richard Gerver-n hitzaldia</p> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div>. <!-- See all videos --> <a href="#" class="mu-swiper-see-all">Ver todos los vídeos</a> </div> </div> </div> </div>