如何使第一个轮播滑块像第二个一样全屏？

Question

我有第一个轮播滑块小提琴示例，我需要使其看起来像我拥有的​​第二个轮播滑块，两个轮播之间的区别在于，第一个轮播比我在学习网站中实现的第二个轮播具有更好的过渡效果。

我需要的是制作示例 1 轮播：

看起来像示例 2 轮播：

（全屏响应）我已将示例上传到演示网站，以便您可以玩使用 chrome 或 Mozilla 检查工具中 f12 的元素值，我还将发布带有注释的详细代码，以便您可以了解代码的作用

这里是演示网站，因此您可以看到 2 个示例

我正在使用 Hostinger.com 的免费网站，即 000webhost.com（将测试站点显示为小提琴）（您可能会看到这个错误，这是一个误报，因为该网站不是网络钓鱼，甚至不是诈骗，甚至不是恶意软件，它只是带有 CSS 和 js 的纯 html）我已经向 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 代码的链接，以便您可以看到它的作用

图像滑块 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;}

这是控制第二个滑块的自定义 js 的链接 此处，

如您在 index html

我正在使用以下 JavaScript 文件，这些文件在第二个示例中使用自定义 js：

backstretch,
jquery,
jquery.backstretch.min,
jquery.magnific-popup.min,
jquery.parallax,wow.min

第一个示例中未使用这些文件，第一个示例中仅使用的 js 是由演示 1 演示 1 示例 1 js 文件

<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>

我将在这里留下 演示网站

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\1\</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>

我该怎么做才能使第一个滑块看起来与第二个滑块完全相同，但具有与第一个示例相同的过渡？

Answer 1

第一个具有良好过渡效果的滑块 mcImgSlider 是 javascript-image-slider 由menucool.com 开发。而且它是授权产品。
过渡效果是使用 JavaScript 实现的，而不仅仅是 CSS 实现。
根据他们的文档：

注意：所有滑块图像应具有相同的尺寸，并且滑块应设置为该尺寸。

滑块图像不可缩放，因为此滑块中的图像将用作切片 DIV 的背景，并且背景图像无法缩放。

更改整个滑块大小的唯一方法是编辑和增加滑块的大小
所有图像。而且它根本没有响应能力。

---

您最好使用 GitHub 上提供的免费开源滑块。就像通量滑块

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>

切换到“整页”。

它是可定制的。