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

Posted 2023-03-05

【中文标题】无限幻灯片插件不适用于背景图像

【英文标题】：Infinite slide plugin not working with a background image

【发布时间】：2018-07-18 19:07:08

【问题描述】：

我正在使用无限幻灯片插件（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"  /></li>
		<li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg"  /></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>

【参考方案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"  /></li>
		<li><img src="http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg"  /></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

【讨论】：

但是如何显示宽度：100% 因为我必须显示全屏。

您也必须将大小 100% 添加到 li 容器中。 codepen.io/Hydrock/pen/rJWXrJ

但是这个插件不是为全屏图片设计的

是的，在 codepen 中，两个答案都对我有用。请在答案中添加codepen链接。感谢我的帮助和支持