如何使第一个轮播滑块像第二个一样全屏？
How to make the first carousel slider full screen like the second one?
我有第一个旋转木马滑块 fiddle 示例，我需要让它看起来像我拥有的第二个旋转木马滑块，两个旋转木马之间的区别在于第一个旋转木马比第二个有更好的过渡效果我已经在我的学习网站上实现了。
我需要的是制作示例1轮播：
看起来像示例 2 轮播：
（全屏响应）我已经将示例上传到演示网站，因此您可以在 chrome 或 Mozilla 的检查工具中使用 f12 的元素值，我也会 post带有注释的详细代码，以便您了解代码的作用
here is the demo website so you can see the 2 examples
我正在使用来自 hostinger.com 的免费网站，即 000webhost.com（将测试站点显示为 fiddles）（您可能会看到此错误，这是误报原因该网站不是网络钓鱼，甚至不是诈骗，甚至不是恶意软件它只是普通的 html 和 CSS 和 js）我已经向 Google 报告了误报：
我需要的是第一个滑块看起来像第二个滑块（全屏）我将向您展示我尝试过的方法，以便您节省时间。
因为我对此不是很有经验，所以我首先尝试使用#home id 中使用的代码，在示例 2
应用于示例滑块 1 CSS，因为根据逻辑我假设由于缺少 html 显示滑块 #2 的代码，代码参与了滑块的调整大小和宽度图像是这样的，应该在滑块 #1 上工作，但它没有工作：
/* Home section */
#home {
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#home .gradient-overlay {
background: #c21500; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
height: 100vh;
}
得到这个结果
我会在CSS代码和js代码中留下一个link，这样你就可以看到它做了什么
图像滑块 CSS 和图像滑块 js 是控制第一个示例滑块的滑块（我试图将其作为示例 2（全屏响应横幅，因为我需要的是拥有相同的滑块，但具有数字 1)) 的过渡效果
img slider CSS
在图像滑块中 CSS 我还有 CSS 控制第二个滑块的代码
这里是图像滑块 CSS 中控制第二个滑块的代码片段：
/* Home section */
#home {
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#home .gradient-overlay {
background: #c21500; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
height: 100vh;
}
这是第一个滑块示例的 CSS 代码：
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:700px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider .sliderInner {
width:700px;/* Must be the same size as the slider images */
border-radius:3px;
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#slider {
background-color:white;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:100%;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:0px;
bottom:0px;top:auto;
overflow:hidden;
font: bold 14px/20px Arial;
color:#EEE;
text-align:center;
background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
color:#FB0;
}
#slider .mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
top:320px;
text-align:center;
background:none;
position:relative;
z-index:3;
}
/* each bullet */
#slider .navBulletsWrapper div
{
width:11px; height:11px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider .navBulletsWrapper .active {background-position:0 -11px;}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
div.navBulletsWrapper {display:none;}
这里是 link 控制第二个滑块的自定义 js
here
如您在 index html
中所见
我正在使用以下 JavaScript 文件，这些文件在 custom js 中调用的第二个示例中使用：
backstretch,
jquery,
jquery.backstretch.min,
jquery.magnific-popup.min,
jquery.parallax,wow.min
第一个例子中没有用到那些文件，第一个例子中唯一用到的js是demo 1创建的一个函数demo 1 example 1 js file
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<script src="themes/1/jquery.js" type="text/javascript"></script>
<script src="themes/1/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.parallax.js" type="text/javascript"></script>
<script src="themes/1/nivo-lightbox.min.js" type="text/javascript"></script>
<script src="themes/1/wow.min.js" type="text/javascript"></script>
<script src="themes/1/custom.js" type="text/javascript"></script>
我将在此处留下 demo website
的 html 代码
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 - Menucool Image Slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<script src="themes/1/jquery.js" type="text/javascript"></script>
<script src="themes/1/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.parallax.js" type="text/javascript"></script>
<script src="themes/1/nivo-lightbox.min.js" type="text/javascript"></script>
<script src="themes/1/wow.min.js" type="text/javascript"></script>
<script src="themes/1/custom.js" type="text/javascript"></script>
</head>
<body>
<div class="div1"><h2>Demo 1 - Menucool Image Slider</h2>
<p>Demos: <a href="demo1.html" class="current">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="images/image-slider-2.jpg" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
</div>
</div>
<div class="div2">
<ul>
<li><b>Copy & Paste</b>: Copy source code and paste it into your own page. All source codes/files are within the <i>demo1.html</i> and the "<i>\themes\</i>" folder</li>
<li><b>Transitional effects</b>: You can choose from 17 transitional effects via the <i>sliderOptions</i> in the <em>js-image-slider.js</em>.
Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo1" target="_blank">Image Slider Demo 1</a> to see how each effect looks and how to customize</li>
<li><b>Navigation Bullets</b>: Navigation bullets are created automatically by the script of the image slider.
<p>The CSS class selector <span class="green">.navBulletsWrapper</span> can be used to change the nav bullets' position and style.</p>
<p>If you don't need the Navigation Bullets, just hide them via CSS:<br /><span class="green cn">div.navBulletsWrapper {display:none;}</span></p>
</li>
<li><b>HTML Caption</b>: Captions are set through each slide image's <span class="cn">alt</span> attribute. If the caption contains HTML content,
you can put the content inside a DIV or SPAN element(usually styled as <span class="cn">display:none</span>), give the element an ID,
and set the <span class="cn">alt</span> as "#(the content container's id)". For example: <span class="cn">alt="#caption4"</span></li>
<li>The image slider shown in this demo is for free.</li>
<li>For detailed instructions, please visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo1">Demo 1</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a></li>
</ul>
</div>
<section id="home">
<div class="gradient-overlay"></div>
<div class="container">
</div>
</section>
</body>
</html>
我该怎么做才能使第一个滑块看起来与第二个滑块完全一样，但具有与第一个示例相同的过渡？
第一个过渡效果很好的滑块mcImgSlider是javascript-image-slider由menucool.com开发的。而且是授权产品。
过渡效果是使用 JavaScript 实现的，它不是 CSS 唯一的实现。
根据他们的文档：
Note: All slider images should have the same size, and the slider should be set to that size.
The slider image is not scalable as the images in this slider will be used as the background of the sliced DIVs, and the background image cannot be scaled.
只有一种方法可以更改整个滑块的大小，即编辑和增加滑块的大小
所有图像。而且它根本没有响应。
您最好使用 GitHub 上提供的免费开源滑块。喜欢Flux Slider
document.body.style.backgroundColor = 'black'
$(function() {
window.myFlux = new flux.slider('#slider', {
autoplay: true,
transitions: ['blocks2', 'zip', 'blinds', 'tiles3d']
});
});
html,
body {
width: 100vw;
height: 100vh;
box-sizing: border-box;
margin:0;
padding:0;
}
#slider {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
#slider * {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100% !important;
width: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.joelambert.co.uk/flux/js/flux.min.js"></script>
<div id="slider">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-2.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-3.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-4.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-5.jpg">
</div>
切换到 'full page'。
就是customizable玩玩
我有第一个旋转木马滑块 fiddle 示例，我需要让它看起来像我拥有的第二个旋转木马滑块，两个旋转木马之间的区别在于第一个旋转木马比第二个有更好的过渡效果我已经在我的学习网站上实现了。
我需要的是制作示例1轮播：
看起来像示例 2 轮播：
（全屏响应）我已经将示例上传到演示网站，因此您可以在 chrome 或 Mozilla 的检查工具中使用 f12 的元素值，我也会 post带有注释的详细代码，以便您了解代码的作用
here is the demo website so you can see the 2 examples
我正在使用来自 hostinger.com 的免费网站，即 000webhost.com（将测试站点显示为 fiddles）（您可能会看到此错误，这是误报原因该网站不是网络钓鱼，甚至不是诈骗，甚至不是恶意软件它只是普通的 html 和 CSS 和 js）我已经向 Google 报告了误报：
我需要的是第一个滑块看起来像第二个滑块（全屏）我将向您展示我尝试过的方法，以便您节省时间。
因为我对此不是很有经验，所以我首先尝试使用#home id 中使用的代码，在示例 2
应用于示例滑块 1 CSS，因为根据逻辑我假设由于缺少 html 显示滑块 #2 的代码，代码参与了滑块的调整大小和宽度图像是这样的，应该在滑块 #1 上工作，但它没有工作：
/* Home section */
#home {
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#home .gradient-overlay {
background: #c21500; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
height: 100vh;
}
得到这个结果
我会在CSS代码和js代码中留下一个link，这样你就可以看到它做了什么
图像滑块 CSS 和图像滑块 js 是控制第一个示例滑块的滑块（我试图将其作为示例 2（全屏响应横幅，因为我需要的是拥有相同的滑块，但具有数字 1)) 的过渡效果 img slider CSS
在图像滑块中 CSS 我还有 CSS 控制第二个滑块的代码
这里是图像滑块 CSS 中控制第二个滑块的代码片段：
/* Home section */
#home {
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#home .gradient-overlay {
background: #c21500; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
height: 100vh;
}
这是第一个滑块示例的 CSS 代码：
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:700px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider .sliderInner {
width:700px;/* Must be the same size as the slider images */
border-radius:3px;
color: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100vh;
overflow: hidden;
position: relative;
}
#slider {
background-color:white;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:100%;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:0px;
bottom:0px;top:auto;
overflow:hidden;
font: bold 14px/20px Arial;
color:#EEE;
text-align:center;
background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
color:#FB0;
}
#slider .mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
top:320px;
text-align:center;
background:none;
position:relative;
z-index:3;
}
/* each bullet */
#slider .navBulletsWrapper div
{
width:11px; height:11px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider .navBulletsWrapper .active {background-position:0 -11px;}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
div.navBulletsWrapper {display:none;}
这里是 link 控制第二个滑块的自定义 js here
如您在 index html
中所见我正在使用以下 JavaScript 文件，这些文件在 custom js 中调用的第二个示例中使用：
backstretch,
jquery,
jquery.backstretch.min,
jquery.magnific-popup.min,
jquery.parallax,wow.min
第一个例子中没有用到那些文件，第一个例子中唯一用到的js是demo 1创建的一个函数demo 1 example 1 js file
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<script src="themes/1/jquery.js" type="text/javascript"></script>
<script src="themes/1/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.parallax.js" type="text/javascript"></script>
<script src="themes/1/nivo-lightbox.min.js" type="text/javascript"></script>
<script src="themes/1/wow.min.js" type="text/javascript"></script>
<script src="themes/1/custom.js" type="text/javascript"></script>
我将在此处留下 demo website
的 html 代码HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 - Menucool Image Slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<script src="themes/1/jquery.js" type="text/javascript"></script>
<script src="themes/1/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="themes/1/jquery.parallax.js" type="text/javascript"></script>
<script src="themes/1/nivo-lightbox.min.js" type="text/javascript"></script>
<script src="themes/1/wow.min.js" type="text/javascript"></script>
<script src="themes/1/custom.js" type="text/javascript"></script>
</head>
<body>
<div class="div1"><h2>Demo 1 - Menucool Image Slider</h2>
<p>Demos: <a href="demo1.html" class="current">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="images/image-slider-2.jpg" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
</div>
</div>
<div class="div2">
<ul>
<li><b>Copy & Paste</b>: Copy source code and paste it into your own page. All source codes/files are within the <i>demo1.html</i> and the "<i>\themes\</i>" folder</li>
<li><b>Transitional effects</b>: You can choose from 17 transitional effects via the <i>sliderOptions</i> in the <em>js-image-slider.js</em>.
Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo1" target="_blank">Image Slider Demo 1</a> to see how each effect looks and how to customize</li>
<li><b>Navigation Bullets</b>: Navigation bullets are created automatically by the script of the image slider.
<p>The CSS class selector <span class="green">.navBulletsWrapper</span> can be used to change the nav bullets' position and style.</p>
<p>If you don't need the Navigation Bullets, just hide them via CSS:<br /><span class="green cn">div.navBulletsWrapper {display:none;}</span></p>
</li>
<li><b>HTML Caption</b>: Captions are set through each slide image's <span class="cn">alt</span> attribute. If the caption contains HTML content,
you can put the content inside a DIV or SPAN element(usually styled as <span class="cn">display:none</span>), give the element an ID,
and set the <span class="cn">alt</span> as "#(the content container's id)". For example: <span class="cn">alt="#caption4"</span></li>
<li>The image slider shown in this demo is for free.</li>
<li>For detailed instructions, please visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo1">Demo 1</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a></li>
</ul>
</div>
<section id="home">
<div class="gradient-overlay"></div>
<div class="container">
</div>
</section>
</body>
</html>
我该怎么做才能使第一个滑块看起来与第二个滑块完全一样，但具有与第一个示例相同的过渡？
第一个过渡效果很好的滑块mcImgSlider是javascript-image-slider由menucool.com开发的。而且是授权产品。
过渡效果是使用 JavaScript 实现的，它不是 CSS 唯一的实现。
根据他们的文档：
Note: All slider images should have the same size, and the slider should be set to that size.
The slider image is not scalable as the images in this slider will be used as the background of the sliced DIVs, and the background image cannot be scaled.
只有一种方法可以更改整个滑块的大小，即编辑和增加滑块的大小
所有图像。而且它根本没有响应。
您最好使用 GitHub 上提供的免费开源滑块。喜欢Flux Slider
document.body.style.backgroundColor = 'black'
$(function() {
window.myFlux = new flux.slider('#slider', {
autoplay: true,
transitions: ['blocks2', 'zip', 'blinds', 'tiles3d']
});
});
html,
body {
width: 100vw;
height: 100vh;
box-sizing: border-box;
margin:0;
padding:0;
}
#slider {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
#slider * {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100% !important;
width: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.joelambert.co.uk/flux/js/flux.min.js"></script>
<div id="slider">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-2.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-3.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-4.jpg">
<img src="https://imprecise-seasons.000webhostapp.com/images/image-slider-5.jpg">
</div>
切换到 'full page'。
就是customizable玩玩