The infinite slide feature isn't functioning properly when combined with a background image

I've recently implemented the infinite slide plugin, which you can find here: https://www.jqueryscript.net/slider/Infinite-Scroller-Plugin-jQuery.html. It's working flawlessly with images using the img tag, but I'm encountering some issues when trying to use it with a background image.

Below you'll find the code snippets both with and without a background image. I specifically need help getting it to work properly with a background image. Can anyone assist me with this?

$(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.8)),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.6)),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.7)),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>
javascriptjqueryhtmlcssinfinite-scroll

Answer №1

Your div element with background does not have a specified size; Please set a fixed size;

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for handling a fulfilled promise within a Vue event handler

Here is a sample component code: <template> <div class="text-center"> <v-dialog v-model="dialog" width="500" > <template v-slot:activator="{ on, attrs }"> ...

javascriptvue.jspromiseasync-await

A Guide to Setting the HTML Lang Attribute on a Specific Page in Next.js

I have a website built with Next.js that consists of several pages. Most of the pages are in English, but there is one page that is in French and does not have an English version. How can I assign the lang attribute to the HTML tag for this specific page ...

javascriptnext.js

Looking to implement a feature in Angular 2 where content on a page can be filtered based on a single array property of the user

Feeling lost here. I need to filter books on the page by their specific Category (Philosophy, Classic, Poetry, etc.) when a user clicks a corresponding button. However, I'm new to Angular and coding in general, so I really want to grasp this concept f ...

htmlarraysangulartypescriptfilter

When using Node.js with Nginx, requests are timing out at the Nginx level before the processing is completed in Node.js

I have a setup where I use Nginx and Node.js servers. The process involves uploading a file from a browser to Nginx, which then forwards it to Node.js for processing. However, I've encountered an issue when dealing with large files - the upload crashe ...

javascriptnode.jsnginxnpm

Troubleshooting Node.js Application: Investigating Port Errors

After cloning a node.js application, I went through the setup process by running npm install and npm install -g nodemon. In order to run the application locally on port 3000, I added the following line in my app.js file: app.listen(3000, () => console. ...

javascriptnode.jsmongodbexpressroutes

When trying to authorize my channel, the JSON data is coming back as a blank string

I've encountered an issue with my JavaScript code: Pusher is throwing the error message "JSON returned from auth endpoint was invalid, yet status code was 200. Data was: ", indicating empty data. I have double-checked the broadcasting service provider ...

javascriptphplaravelvue.js

Error: Unable to import 'index.js' with the require() function in the current directory

A directory named src/config contains multiple files: a.js, b.js, c.js, and index.js While working within b.js, I encounter the issue where const data = require('./index'); OR const data = require('./index.js'); always results in ...

javascriptnode.jsexpressnodejs-server

Removing quotes from JSON values in Node.js without removing quotes from JSON keys

For my project, I am currently developing a REST API that utilizes a library called JSONata for data transformation. The API is designed to receive JSON input consisting of both data and mapping information. Below is a simple example: { "map":{ ...

javascriptnode.jsjsonjsonata

Discovering Consecutive Matching Positions in an Array

I am trying to find the first location (or set of locations) in an array that is distinctly different from the initial location. The difference is determined based on a function calculating their distance. Here's an example array: [ {lat: 45, lng: ...

javascriptarrays

Using an Ajax-jQuery request to fill in data for a table

Attempting to perform a web service call using the GET method from a URL with an ID. The specified URL is http://10.173.143.252:8181/cxf/crm/customerservice/customers/125. This URL returns a JSON response. {"id":125,"name":"John","password":"password","r ...

javascriptjqueryajax

Difficulty surfaced in the React project following relocation to a different device

I'm new to using React and webpack with babel loader in my app. My project was running smoothly until I changed machines. I copied all the files except for node_modules (which I installed with npm install). Now, when I try to run or build the projec ...

javascriptnode.jsreactjsnpmwebpack

Angular webpage failing to display JSON data received from Node backend server

Embarking on my journey in modern web development, I've been diving into the MEAN stack with online tutorials. My current project involves building a basic todo app that facilitates CRUD operations. Utilizing the MEAN stack (Mongo database via Mongola ...

javascriptangularjsjsonnode.jsmean-stack

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss

What is the method for utilizing HSL instead of RGB in the global declaration of SCSS using the JavaScript API

This is how my next.config.js file is structured: // next.config.js const env = require('./site.config').env; const Colour = require('sass').types.Color; const {r, g, b} = require('./site.config').customProperties; const wit ...

javascriptreactjssassnext.jsglobalization

Arranging divs in a layout similar to tables cells and rows

Currently, I am developing a small game to enhance my Javascript skills. In the past, I utilized tables for displaying my content (images): Now, my goal is to switch from using tables to divs. However, I want to position them in a manner that resembles t ...

htmlcss

I am currently exploring next.js and working on creating a dedicated single post page within my project

I am currently working with Next.js and fetching some dummy data on the homepage. However, I am facing an issue when trying to create a separate page for each post obtained from the homepage. Although I have already coded it, I feel like there is room fo ...

javascriptreactjsnext.js

Is the order of query execution being altered when using the MongoClient in Node.js?

I am currently developing a registration API endpoint that utilizes MongoDB to validate two specific conditions: If the username provided already exists in the database, it will return a status of 500 If the email address provided already exists in the da ...

javascriptnode.jsmongodbexpressmongodb-query

Verify the channel where the bot is currently active and dispatch a message

I've been attempting to set up my bot to send a message when it joins a guild, but for some reason, it's not functioning as expected. Here is what I have tried (along with some other variations): const { PermissionsBitField } = require('dis ...

javascriptnode.jsdiscord.js

Getting rid of a blue border from a button upon clicking

Here is the problematic section of code :root { --color-foreground-text-main: rgb(255, 72, 142); --color-foreground-text-sub: rgb(0, 114, 153); } html, body { height: 100%; } img { max-width: 100%; } #cover { background: #222 url('Reso ...

htmlcssbootstrap-4

Implementing Cypress with NextJS for React Server Actions

For my Cypress tests, I am attempting to intercept the client-side request made by React Server Components. I initially thought I could achieve this by simply inspecting and replicating the request response (including headers) in the network tab, and then ...

javascriptreactjsnext.jscypressserver-action