The slick jQuery plugin seems to be malfunctioning

I recently downloaded the jQuery files in order to implement some image sliders on my website, but unfortunately, they are not functioning properly. Is there anyone who can help me identify any issues with the code? Thank you in advance.

<body>
  <ul id="image-slider" style="position: relative; top: 0px; left: 0px; width: 600px;
        height: 300px;">
    
      <li><div class="slide"><img src="./images/sample-01.png"></div></li>
      <li><div class="slide"><img src="./images/sample-02.png" /></div></li>
      <li><div class="slide"><img src="./images/sample-03.png" /></div></li>
      <li> <div class="slide"><img src="./images/sample-01.png" /></div>
    <li> <div class="slide"><img src="./images/sample-02.png" /></div></li> 
      <li><div class="slide"><img src="./images/sample-03.png" /></div></li>
  </ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script> 
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>

<script type="text/javascript">
 jQuery(document).ready(function ($) {
 var slideshowTransitions = [
     
{$Duration:1200,$Opacity:2}
 ];
 var options={
        $SlideDuration:500,
        $AutoPlay:true,
        $DragOrientation:3,
        $Idle:1500,
        $slideshowOptions: {
            $Class:$JssorslideshowRunner$,
            $Transitions:_slideshowTransitions,
            $TransitionsOrder:1,
            $ShowLink: true
        }
                        };
                        
var slider= new $Slider$("image-slider", options);
                 });
</script>

Answer №1

Initially, your HTML structure is disorganized and not valid. The fourth <li> element was left unclosed, and within the <ul> element, inline styles should be applied using the style attribute. In this scenario, it should be like:

<ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">
.

The JavaScript code you provided seems unfamiliar, but the documentation for slickJS appears to be straightforward.

Below is a snippet of my code that incorporates a slideshow which you are free to copy, paste, and customize as needed. Refer to the documentation for more possibilities. Ensure that you have imported everything in the correct sequence: jQuery -> slickjs -> custom JavaScript. Also, make sure the slick CSS is linked correctly in the head section.

$(document).ready(function () {
    $('.slider').slick({
        dots:true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
});
/*
    Customize the slider container with your own CSS 
    to fit or position it on your page as desired.
*/
.slider {
    width:70%;
    margin:0 auto;
}
/*
    I added divs inside that allow padding adjustment 
    between images. Feel free to tweak this CSS for your needs.
*/
.slide-image-container {
    padding:2%;
}
/*
    This CSS ensures inner images size to the parent (slide) container.
*/
.slide-image-container img { 
    width:100%; 
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
      <div>
        <div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
      </div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

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

Middle position of the rotating display

Currently working on a shop's image carousel where I'm implementing scroll-snap-type: x mandatory; for the container and scroll-snap-align: center; for the images. However, running into a challenge where the container sometimes exceeds the width ...

multer - the file uploaded by the request is not defined

I've been working on an app with Node, Express, and multer for image uploads. However, after submitting the form, req.file is coming up as undefined. I've spent hours trying to troubleshoot this issue but haven't been able to pinpoint the pr ...

Ensure that the table is padded while keeping the cells collapsed

I am currently working on creating a table with borders between each row. However, I am facing an issue where the row borders are touching the outer border of the table. Despite my efforts, I have been unable to find a solution to this problem. I feel like ...

Having trouble connecting v-model to vue-date-picker

My experience with the vue-date-picker and v-model for two-way data binding has been interesting. Initially, I set the value to a date (referred as startDate in this case) and printed the passed value (i.e. startDate) in the console. The initial value pa ...

How can I avoid anti-aliasing in browsers when enlarging images?

Back in April 2012, Google's Chart Image API became deprecated but it was possible to generate QR codes using it. Although I know that I can adjust the size of the image produced by the API, I prefer to simply use CSS along with the width and height ...

Struggling to insert a JavaScript variable into a MySQL database table using PHP and AJAX

As a newcomer to these technologies, I've been struggling all day with what I expected to be a simple task. My goal is to pass a parameter from a JS function to my PHP code using AJAX and then insert that parameter into my database. Here's the J ...

Guide on dynamically setting values for two indexes in ng-options using Angular.js

Can someone help me with this issue? I am trying to use two indexes ($index, $parent.$index) in the ng-options object with Angular.js. Below is my code explanation. <tr ng-repeat="d in days"> <td>{{d.day_name}}</td> <t ...

How can we dynamically resize page content to fit varying browser window sizes across different devices with the help of jQuery/JavaScript?

Looking for a solution involving an HTML form that includes a text field and a submit button. The text field is where the user enters a URL, and upon clicking the submit button, they are redirected to that URL. Seeking a way to adjust the size of the new ...

A problem arises when making an ajax call

I'm struggling with an Ajax call made using the jQuery .blur() method. Every time I try to execute it, an error message pops up. Any idea why this is happening? Here's my jQuery/Ajax Code: <script> $("#given_name").blur(function(){ va ...

Utilizing query parameters as variables in rewrites with Next.js

My goal is to use Next JS to redirect requests from /home?id=123qwert to the new path of /home/123qwert. I'm struggling with extracting the query parameter from the source and using it in the destination. This is what I have attempted so far: as ...

Allowing a certain amount of time to pass before executing a method

I'm familiar with using setTimeout and setInterval to delay the execution of a method, but I am facing a specific issue. I am working on implementing a card game where three CPU players take turns with a 500ms delay between each turn. Below is the cod ...

WCF API encountering issue with Ajax request

I encountered the following error: The exception message is 'The incoming message has an unexpected message format 'Raw'. The expected message formats for the operation are 'Xml', 'Json'. This can be because a WebC ...

What is the best way to retrieve information from an http website and display it in an html table using javascript

I am attempting to retrieve data from the specified site: . The website appears to feature a list of objects, and my goal is to extract each object enclosed in {} into separate columns within a row (6 columns total - one for gameNumber, one for teams, and ...

Tips for updating a URL using data obtained from a JSON response

As I loop through an array from JSON, I extract all the necessary information. For example, if I have cards for blog posts that include the title, short description, published date, and URL. When clicking on a card, it redirects to a corresponding page ba ...

What is the proper way to address the issue of nesting ternary expressions when it comes to conditionally rendering components?

When using the code below, eslint detects errors: {authModal.mode === 'login' ? <Login /> : authModal.mode === 'register' ? <SignUp /> : <ForgotPassword />} Error: Avoid nesting ternary expressions. eslint(no-nested-t ...

What causes state or props to be null in React upon page refresh?

I have implemented a tree view on the left frame of the page, which is generated from an XML file. When a user clicks on a node in the tree, components open up on the right frame of the page. The ProductsTreeView is responsible for displaying the tree comp ...

Utilize Angular 2 to upload and access files directly on the client side

How can I obtain log file(s) from a user so that I can analyze them? Is there a way to create a drop area where the user can upload a file, and then I can read it using JavaScript? I am currently using Angular2 rc5 and have node.js running on the backend, ...

Using Firefox to cache Ajax calls after navigating back in the browsing history

Currently, I am utilizing an ajax call to invoke a php script that waits for 40 seconds using sleep and then generates the output RELOAD. Subsequently, in JavaScript, the generated output is validated to be RELOAD, following which the call commences again. ...

In your experience, what's the most efficient method you've come across for editing tags?

Currently, I am working on implementing a feature that allows users to edit the list of tags displayed next to each link on a website. This includes adding, removing, and modifying tags. I am searching for an efficient way to make this process user-friend ...

Website experiences technical difficulties but database remains up-to-date

I previously made a similar post, but I have not resolved the issue yet. Here is the output from my terminal: 23 Dec 22:31:23 - Serving request for url[GET] /team 23 Dec 22:31:23 - Successfully created team with Name : Japan 23 Dec 22:31:23 - Serving re ...