glide实现视频文字图标可拖拽幻灯片效果代码
代码语言：html
所属分类：幻灯片
代码描述：glide实现视频文字图标可拖拽幻灯片效果代码，幻灯片的每一页都是一个视频文字，可左右拖拽无缝切换，还可点击底部图标切换。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #000;
color: #fff;
font-family: sans-serif;
}
video {
display: block;
max-width: 100%;
width: 100%;
}
#slides {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.glide__slide p {
color: rgba(252, 252, 252, 0.5);
font-size: 12px;
}
.glide__bullets {
display: inline-flex;
gap: 10px;
}
.glide__bullet {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: transparent;
color: #fcfcfc;
transition: 0.2s color, 0.2s background-color;
}
.glide__bullet.glide__bullet--active {
background: #fcfcfc;
color: #0c0c0c;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/glide.core.min.css">
</head>
<body translate="no">
<div id="slides" class="glide">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<!-- 1 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/7e7078d9c941421ab5481b1981c33017.mp4"/>
</video>
<p>Cargo resupply missions to the International Space Station are a great example of the increasing reliance on space-based logistics for sustaining human presence beyond Earth. The capability for resupply and removal is not only crucial for scientific progress but also holds immense potential as commercial applications become commonplace in orbit.</p>
</div>
<!-- 2 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/0b8fc367bc904c20ba7fcacdb9eac11d.mp4?123"/>
</video>
<p>Microgravity entertainment venues present an opportunity to captivate audiences with awe-inspiring, gravity-defying spectacles. These unique environments can host a wide range of events, from sporting competitions and live concerts to immersive theatrical productions and cinematic experiences that push the boundaries of creativity.</p>
</div>
<!-- 3 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/7872f37f3ec744ef9076e35ab127478a.mp4"/>
</video>
<p>With earth observation and communications services dominating the space industry the demand for in-space data centers and the value of being able to process data in orbit continues to grow.</p>
</div>
<!-- 4 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/c54158201dda4336b251bf767b303b45.mp4"/>
</video>
<p>The microgravity environment of space provides an ideal setting for manufacturing advanced materials with exceptional purity and structural integrity. This capability will lead to invaluable advancements in various areas including semiconductor technology, enabling the development of faster, more efficient, and more powerful electronic devices that drive innovation across multiple industries</p>
</div>
<!-- 5 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/c8296ba13b364c4b80c0375541904df8.mp4"/>
</video>
<p>Housing assets in space enables flexible mission profiles, relevant response times, and the ability to bypass launch delays
</div>
<!-- 6 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/5b183f27464b4d91a090952a4815cddc.mp4"/>
</video>
<p>The establishment of propellant depots in orbit represents a pivotal step towards enabling sustainable and cost-effective space exploration. The gas stations of space extend mission durations, facilitate lunar and interplanetary architectures, and pave the way for historic crewed missions.</p>
</div>
<!-- 7 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/f20be7e29c334ee8830457a042cb47f4.mp4"/>
</video>
<p>With launch costs dropping and a new era in commercial space activity on the horizon, space stations expand opportunities for research, manufacturing, and tourism, fostering a thriving economy and paving the way for humans to thrive beyond our home planet.</p>
</div>
<!-- 8 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/5bda910595b5454d8bc8d9d5b7460f61.mp4"/>
</video>
<p>The microgravity environment offers a promising platform for biomanufacturing, enabling the production of pharmaceuticals, drugs, and even human tissues with superior quality and efficacy. This capability is leading the development of novel therapies and treatments for a wide range of diseases, and is set to transform healthcare and improve life Expectancy.</p>
</div>
<!-- 9 -->
<div class="glide__slide">
<video style="margin: 0 auto; max-width: 100%; display: block" loop autoplay playsinline muted>
<source src="//repo.bfw.wiki/bfwrepo/video/machine/082270f874c44ed6a2e6bfd0387b1063.mp4"/>
</video>
<p>Humans need large living spaces. The staterooms concept provides private chambers to be coupled with common space in a neighboring module.</p>
</div>
</div>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<!-- 1 -->
<button class="glide__bullet" data-glide-dir="=0">
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0