无限幻灯片插件不适用于背景图像

Question

我正在使用无限幻灯片插件(https://www.jqueryscript.net/slider/Infinite-Scroller-Plugin-jQuery.html)。它与 img tag 完美配合，但不适用于背景图片。

请检查以下有背景和无背景图片的代码。

我需要和背景图片一起使用。

你能帮我解决这个问题吗？

 $(function(){$('.scroll1').infiniteslide();});

   html,body{
 margin: 0;
 padding: 0;
 height: 100%;
-webkit-font-smoothing: antialiased;
}
 .scroll1 {
  display: none;
 }
 .scroll1 img {
  vertical-align: bottom;
  width: 400px;
 }
 .banner_bg{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    background-position: center;
    min-height:100%;
}
.application_slider_1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg');
}
.application_slider_2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg');
}
.application_slider_3{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg');
}
.application_slider_4{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg');
}

<!--with background image-->
 <ul class="scroll1">
  <li><div class="application_slider_1 banner_bg"></div></li>
  <li><div class="application_slider_2 banner_bg"></div></li>
  <li><div class="application_slider_3 banner_bg"></div></li>
  <li><div class="application_slider_4 banner_bg"></div></li>
 </ul>

<!-- with img tag-->
<ul class="scroll1">
  <li><img src="http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg" alt="" /></li>
  <li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg" alt="" /></li>
  <li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg"></li>
  <li><img src="http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg"></li>
 </ul>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/infiniteslidev2.js"></script>

Answer 1

您 div 带有 bg 的标签 - 没有尺寸；设置固定大小；

 $(function(){$('.scroll1').infiniteslide();});

   html,body{
 margin: 0;
 padding: 0;
 height: 100%;
-webkit-font-smoothing: antialiased;
}
 .scroll1 {
  display: none;
 }
 .scroll1 img {
  vertical-align: bottom;
  width: 400px;
 }
 .banner_bg{
    background-repeat: no-repeat;
    background-size: cover;
    /*width: 100%;*/
    height: auto;
    background-position: center;
    /*min-height:100%;*/
    width: 100px;
    height: 100px;
}
.application_slider_1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg');
}
.application_slider_2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg');
}
.application_slider_3{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg');
}
.application_slider_4{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg');
}

<!--with background image-->
 <ul class="scroll1">
  <li><div class="application_slider_1 banner_bg"></div></li>
  <li><div class="application_slider_2 banner_bg"></div></li>
  <li><div class="application_slider_3 banner_bg"></div></li>
  <li><div class="application_slider_4 banner_bg"></div></li>
 </ul>

<!-- with img tag-->
<ul class="scroll1">
  <li><img src="http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg" alt="" /></li>
  <li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg" alt="" /></li>
  <li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg"></li>
  <li><img src="http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg"></li>
 </ul>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/infiniteslidev2.js"></script>

Link https://codepen.io/Hydrock/pen/KQaPoe

无限幻灯片插件不适用于背景图像

Infinite slide plugin not working with a background image

html

javascript

css

jquery

infinite-scroll