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

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>

链接 https://codepen.io/Hydrock/pen/KQaPoe