Unable to use saved images with jQuery Slider

I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites.

Below is the code snippet where I have included an image file path for reference:

<!DOCTYPE HTML>
<html>
    <head>
        <title>UnSlider</title>
        <style>
            body, html {
                padding:0px;
                margin: 0px;
            }
            .banner { 
                position: relative; 
                width: 100% !important; 
                overflow: auto; 
                padding: 0px;
                margin: 0px;
            }
            .banner ul {
                padding: 0px;
                margin: 0px;
            }
            .banner li { 
                list-style: none; 
                padding: 0px;
                margin: 0px;
            }
            .banner ul li { 
                float:left;
                padding: 0px;
                margin: 0px;
                min-height: 350px;
                -webkit-background-size: 100% auto;
                -moz-background-size: 100% auto;
                -o-background-size: 100% auto;
                -ms-background-size: 100% auto;
                background-size: 100% auto;
                background-position-y: -75px;
                box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
            }
        </style>
    </head>
    <body>
        <div class="banner">
            <ul>
                <li style="background-image: url("../images/jam.jpg");"></li>
                <li style="background-image: url('http://placehold.it/1400x400');"></li>
                <li style="background-image: url('http://placehold.it/1400x400');"></li>
                <li style="background-image: url('http://placehold.it/1400x400');"></li>
            </ul>
        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://unslider.com/unslider.min.js"></script>

        <script>
            $(document).ready(function(){
                $('.banner').unslider({
                    speed: 500,               //  The speed to animate each slide (in milliseconds)
                    delay: 5000,              //  The delay between slide animations (in milliseconds)
                    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
                    dots: false,               //  Display dot navigation
                    fluid: false              //  Support responsive design. May break non-responsive designs
                });
            });
        </script>
    </body>
</html>

Thank you!

Answer №1

Perhaps, it would be beneficial if you could provide the directory path to where your html file is located and the folder containing the images.

For example, if your html file is situated in: /Users/Dom/Desktop/NewWebsite, to link to an image, you can use:

<li style="background-image: url("images/jam.jpg");"></li>
or
<li style="background-image: url("images/jam.jpg");"></li>
as shown in your scenario. Using two dots(..) denotes moving one folder up, if the image is within the same folder. Alternatively, you can also try:
<li style="background-image: url("./images/jam.jpg");"></li>
One dot(.) indicates there is a folder named images within the current directory, navigate inside it to locate a picture named jam.jpg. I hope this explanation proves helpful. Best of luck! –

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

inconsistency in button heights

I am currently working on a website project for one of my college courses and I have encountered an issue with the button heights in my slide show not matching up. I'm seeking advice or tips on how to align both buttons to have the same height. Can an ...

What's the best way to correct a word that is positioned at the bottom of a banner image?

https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the ...

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

hover effect malfunctioning

I have created a maze but am having trouble with the hover effect not working. Any help would be greatly appreciated. $('.wall') .bind('mouseenter', function() { $(this).css({ 'background-color': 'green' ...

The Art of jQuery Data Processing

I'm currently working on extracting data from a form submission. Below is the code I've been using. function handleSubmission() { $("#questionForm").submit(function() { $.post("SubmitQuestion.php", $("#questionForm").serialize()).done(functi ...

Determine which checkboxes are checked using jQuery

Is there a way to identify which checkboxes are checked after clicking on a specific button in a scenario where I have multiple checkBoxes created under a single div with data-role="controlgroup"? I am using JQuery for this task and need the best approac ...

Issues with Angular HTML failing to load correctly

Greetings, I am seeking assistance with an issue that has been challenging me for quite some time. As a newcomer to Angular JS, I may be overlooking something obvious. Here is the scenario: I am utilizing ng-repeat on a directive in the following manner: ...

The parent DIV has a height of 0px, yet the child element is still visible

As I explored options for creating a navbar drop down menu with an accordion effect, I stumbled upon this informative YouTube video. The tutorial demonstrated the use of a custom component and manipulation of the max-height property of the card-content ele ...

Dividing the sentences inputted into a text area into an array and determining which sentence has been altered upon keyup

One of my current tasks involves handling the content within a textarea element: <textarea id="text"> Hello! Who am I? This is the third sentence. This, is another sentence. </textarea> Given that a textarea can be focused, I am seeking a met ...

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

Arranging list items on top of each other without using absolute positioning

Hey there! I am trying to figure out a way to stack list items containing images on top of each other, like a deck of cards, but without resorting to absolute positioning. I attempted to do it using absolute positioning, here's what I came up with: ...

Using Express and Node.js to implement the Google Maps API

Currently working on creating a simple web application using the Google Maps API with express/node. At the moment, I have three main files that make up my project: server.js const express = require('express'); const bodyParser = require(' ...

Manipulate jQuery to set the table row containing empty table data cells to be lower than the row with

I am using HTML and jQuery to sort my table, including non-standard sorting with multi-tbody. The issue I am facing is that the prices (Цена) in the td are sorted ascending but not correctly. Why is this happening? Additionally, I need to move the tr&a ...

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

Discover identical JSON elements in 2 JSON arrays using JavaScript and add CSS styles to the corresponding items within a UL list

In order to manipulate JSON data using JavaScript, I am required to create an HTML UL list of tags based on a JSON array of Tag items. Furthermore, there is a second set of Tags in another JSON data-set that needs to be compared with the first Tag JSON da ...

Unexpectedly, the jQuery get function retrieves the entire webpage

I'm encountering difficulties when using .get requests to update elements through page load or button press. Here is the code snippet... $(document).ready(function() { //updateVariable(); $('#dannychoolink').html('<?php dan ...

Using jQuery to make an AJAX call to an API

i have a request $(function(){ $.ajax({ type: 'GET', dataType:"jsonp", url: "http://localhost:8000/api/admin/announces", headers:{ 'Authorization' : 'Bearer eyJhbGci ...

Tips for aligning a row with both text and input fields in the center

I'm working on a design that includes text and input fields in rows, and I want everything to be centered. Should I wrap all the content in a div and center it as a whole, or should I center each row individually? Any suggestions? Here is the code sn ...

Partial data is being received from the Ajax call

I currently have a textarea and a button on my webpage <textarea id="xxx" class="myTextArea" name="Text1" cols="40" rows="15">@ViewData["translation"]</textarea> <input type="button" id="convert-btn" class="btn btn-primary" value="Convert t ...