mdb视频幻灯片示例代码
代码语言:html
所属分类:幻灯片
代码描述:mdb视频幻灯片示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <!-- Font Awesome --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdb.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mdb.min.js"></script> </head> <body> <!-- Carousel wrapper --> <div id="carouselVideoExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <!-- Indicators --> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p> Nulla vitae elit libero, a pharetra augue mollis interdum. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"> <!-- Indicators --> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="Sunset Over the City"/> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="Canyon at Nigh"/> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="Cliff Above a Stormy Sea"/> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> <!-- Modal gallery --> <section class=""> <!-- Section: Images --> <section class=""> <div class="row"> <div class="col-lg-4 col-md-12 mb-4 mb-lg-0"> <div class="bg-image hover-overlay ripple shadow-1-strong rounded" data-ripple-color="light" > <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal1"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div> </a> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="bg-image hover-overlay ripple shadow-1-strong rounded" data-ripple-color="light" > <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div> </a> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="bg-image hover-overlay ripple shadow-1-strong rounded" data-ripple-color="light" > <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal3"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div> </a> </div> </div> </div> </section> <!-- Section: Images --> <!-- Carousel wrapper --> <div id="carouselMultiItemExample" class="carousel slide carousel-dark text-center" data-mdb-ride="carousel" > <!-- Controls --> <div class="d-flex justify-content-center mb-4"> <button class="carousel-control-prev position-relative" type="button" data-mdb-target="#carouselMultiItemExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next position-relative" type="button" data-mdb-target="#carouselMultiItemExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Inner --> <div class="carousel-inner py-4"> <!-- Single item --> <div class="carousel-item active"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0