The slider class in the div is not showing the image, but it is visible in the elements

Is the sequence of loading .css and .js files in the head section important for displaying images with the .slider class on MaterializeCSS?

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


  </head>

  <body>
  <div class="slider">
    <ul class="slides">
      <li>
        <img src="416.jpg">
      </li>
      <li>
        <img src="417.jpg">
      </li>
    </ul>
  </div>
  </body>
</html>

javascripthtmlcssmaterialize

Answer №1

Before we proceed, it's important to note that you have included two versions of jQuery in your code. To rectify this issue, kindly remove the <script> tag for jquery-2.1.1.min.js.

The reason why the images are not showing up is due to the fact that you have not initialized the slider. You can fix this by adding the following block of jQuery code:

<script>
    $(function(){
        $('.slider').slider();
    });
</script>

Answer №2

Erase opacity: 0 within the .slider .slides li classes

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

Is there a JavaScript function available that can enable the placeholder attribute to function properly in Internet Explorer?

I currently have numerous input tags in my project that utilize a placeholder attribute, such as the following: <input id="Name" name="Name" placeholder="Name Goes Here" type="text" value=""> Is there a JavaScript function that I can include in my ...

javascriptjqueryhtmlinternet-explorerplaceholder

In Angular 7, where can the controller be found within its MVC architecture implementation?

From what I understand, Angular adheres to the MVC architecture. In the components, there is a .ts file which serves as the model and a .html file for the view, but my question is: where is the controller located? ...

javascriptnode.jsangulartypescriptsingle-page-application

Finding text outside of a HTML tag with jsoup

I am working with the following HTML code: Data <div class="alg"></div> <div class="alg"></div> Pepsi 791 <div class="alg"></div> <div class="alg"></ ...

htmljsoup

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

Div blur event for editing content

Utilizing a content editable div as an input control has presented some challenges for me. Unlike a textarea or input element, the div does not send information to the server automatically. To work around this issue, I have implemented a solution where I u ...

javascriptc#htmlasp.net

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascripthtmljquerycss

What causes Node's crypto module to generate varying outputs for identical strings?

I'm currently attempting to execute the following program: var crypto = require('crypto'); var a = crypto.createHash('md5').update('89Zr-J591').digest('hex'); var name = '89Zr−J591'; var b = crypto. ...

javascriptnode.jscryptography

How can I remove the color of a button in jquery after it's been clicked?

<button style="background-color:lightblue" id="extractv"> <b> Extract<br>v </b> </button> ... $("#extractv").click(function () { $("#extractv").removeAttr("style"); }); Upon clicking the button, my ...

jqueryhtmlcssbuttoncgi

decide whether to use webpack bundling during development or not

Whenever I save a file, it takes around 30 seconds for the changes to reflect. I am currently using gulp watch and webpack for bundling around a hundred files. Is there any way to speed up the build process? ...

javascriptnpmwebpackgulp

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascriptandroidjquerycssscroll

How can you use JavaScript to assign a data value to a hyperlink?

I'm currently facing an issue with assigning a value to the data-attribute of an anchor tag. Below is the code snippet in question: <script> window.onload = function(){ document.getElementById("setcolor").click(); } var color = "red"; document ...

javascript

Tips for vertically aligning text in the center with bootstrap

When creating a portfolio with bootstrap, I encountered an issue where I couldn't get the text to be vertically centered. Even after trying align-items-center and justify-content-center, I still couldn't achieve the desired result. Here is the sn ...

htmlbootstrap-4vertical-alignmenttext-alignment

What is the best way to send the totalAmount data from one child component to its parent, and then pass it on to another

I am facing an issue with passing the totalAmount data from cart.js to the parent component (app.js) and then further to another child component (info.js). Despite my attempts, it seems like I am unable to pass it correctly as I encounter the following err ...

javascriptreactjsmaterial-ui

Guide to properly deserializing a JSON string into a class with a nested List of different class members

I have a scenario where I am sending a JSON stringified "View" object from the browser to an ASP.Net Page Method using Jquery's $.Ajax(). The issue I am facing is that while the Javascript deserialization is successful for all the strings and integers ...

c#javascript.netasp.netjson

Implementing a jQuery plugin and AngularJS for post-render actions

I am currently in the process of developing a slider, where I am utilizing the ng-repeat directive to loop through a (RESTful) service and generate slides for the slider. For proper initialization, I have enclosed the slider within a custom directive that ...

javascriptjqueryangularjs

When the form is submitted, the text input vanishes and then the page is refreshed using AJAX technology

Can anyone help me troubleshoot why my page is reloading even though I used AJAX, and how to prevent it from clearing my input text after clicking the submit button? I tried using the show method to resolve this issue but it didn't work. <form met ...

javascriptphpjqueryajaxforms

Transforming an array of JSON objects into a Knockout observable array containing observable properties

My application utilizes an ajax call to fetch a JSON array. [ {"ID":2,"Name":"Name 1","CreatedOn":"/Date(1432892160000)/"}, {"ID":7,"Name":"Name 2","CreatedOn":"/Date(1432892160000)/"}, {"ID":8,"Name":"Name 3","CreatedOn":"/Date(1432892160000)/"}, {"ID":9 ...

javascriptjqueryjsonknockout.jsobservable

Transferring information from an external JavaScript file to a Vue component

I am currently facing an issue with passing data from an external file called data.js to the component for its usage. The error I'm encountering states that the data is not defined. Below is the content of my data.js file: const data = [ { cha ...

javascriptvue.jshighchartsvue-component

Issue with AJAX POST request: PHP failing to establish session

I would like to pass the element's id to PHP and create a session for it. This snippet is from a PHP file: <?php $sql = "SELECT id FROM products"; $result = mysqli_query($con,$sql); while($row = mysqli_fetch_array($result)) { ?> <tr cl ...

javascriptphpajax

What is the best way to execute two asynchronous operations simultaneously in Node.js, treating them as a single atomic operation?

In my current setup, I have a function that calls two asynchronous functions. This main function is responsible for handling user requests. Let me show you an example: mainFunction(req, res, done) { asyncExist(req, function(exists) { if (!exists ...

javascriptnode.js