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 class mu-swiper-multimedia

<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

Ver todos los vídeos

Añadir al elemento .swiper-pagination el class invisible

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

Ver todos los vídeos

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>

Carrusel multimedia (HTML avanzado)

Carrusel con dos o más vídeos

Carrusel con un único vídeo

Carruseles a dos columnas

Templates