I am working on setting up a sleek slider, but unfortunately, it does not seem to be functioning correctly. Surprisingly, there are no errors appearing in the console either

I've been experimenting with the slick slider for my website, and I'm encountering a problem. Despite having all the necessary files in the correct folder and no console errors, my images or cards are displaying in a vertical line rather than as a slider. Here is the HTML code I am using:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Palvisha Shoaib</title>
  <link rel="stylesheet" type="text/css"href = "style.css">
  <link rel="stylesheet" type="text/css"href = "slick.css">
  <link rel="stylesheet" type="text/css"href = "slicktheme.css">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

</head>
<body>
 <div class="box6">
    <section class="variable slider">
      <div>
        <div class="row">
          <div class="col s12 m7">
            <div class="card" style="width: 250px;">
<div class="card-content">
                <p>content</p>
              </div>
            </div>
            </div>
        </div>
        <div class="row">
        <div class="col s12 m7">
        <div class="card" style="width: 250px;">
        <div class="card-content">
                <p>content</p>
              </div></div>
             </div>
        </div>
      </section>
     </div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
    </body>
</html>
javascripthtmljquerycss

Answer №1

For those interested in learning more about the slick slider, I suggest visiting this website for a comprehensive tutorial:

It appears that the specific function mentioned is not currently included in your code.

<script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </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

What is the best way to identify which button was clicked within an HTML form, and then use that information to send different values using AJAX?

I have created the following HTML form with two buttons: <form class="center" id="myform"> <p> <input id="email" name="email" type="email" class="textox email" title="" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

javascriptphpjqueryajax

Is it possible to have a text box that is partially read-only and partially editable?

<form> <div class="col-sm-2" style="margin-top: 5px;color:#357EBD;font-weight:bold;" id="sub-ticketid"><?php echo 'Ticket 12345#'; ?></div> <input type="text" class="form-control" style="background:#fff;" name="sub-hold ...

javascriptjqueryhtmldom

Retrieve the current state within a redux action

Many experts recommend consolidating the logic in action creators to streamline the reducer's logic. Picture a basic (normalized) state: const initialState = { parent: { allIds: [0], byId: { 0: { parentProperty: `I'm the ...

javascriptreduxredux-thunk

Creating a Dynamic Dropdown Menu in Rails 4

I am attempting to create a dynamic selection menu following this tutorial; however, I am encountering issues as the select statement does not seem to be updating. Below is the code snippet I currently have: #characters_controller.rb def new ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

How can we calculate the `rotate` value for a CSS transform using a formula

Referencing this particular fiddle, I've developed a unique custom underline technique utilizing transform: skew(-30deg) rotate(-2deg);. Is there a way for me to substitute the static -2 with a dynamic formula based on the element's width? For ...

csssass

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

htmlcssframeworks

The function will not be triggered when the form is submitted

I've set up this form to send data to the server-side. It's built in HTML/CSS with AngularJS as well. I made sure that the button is placed inside the form, a common mistake that can cause issues. However, despite my efforts, the function "onAddE ...

javascripthtmlcssangularjsweb

Why does LESS keep prompting me with missing elements?

I am currently working on my first project using Less and have been following a tutorial closely. However, when I try to compile with lessc, I encounter the following error: ParseError: Unrecognised input. Possibly missing something in C:\Path\t ...

cssless

Using JQuery to Identify the Clicked Div Container

Currently working on a JQuery script to determine which specific div box was clicked, but running into some issues. I understand that there are other approaches to achieve this by directly invoking functions upon clicking a div box, but I want to first ide ...

javascriptjqueryhtml

execute an AJAX function when the TD element is not empty and is clicked

I currently have a table with an image inside the td. I am using an ajax function to update a value in the database when the td image is clicked. My issue is that if the td is empty (i.e., no image in the td), the same function still performs. What I want ...

phpjqueryajaxdomonclick

Utilizing jQuery to create a blocking modal with a spinning gif, without the need for jQuery Block

When working on a Bootstrap page and faced with a time-consuming task, it's common to want a spinning GIF to show that the process is happening and to prevent users from interacting with certain parts of the UI. While jQuery offers the plugin jQuery ...

javascriptjqueryjquery-blockui

Having trouble retrieving AJAX response with jQuery in Laravel 5.3

Currently, I am working on a project in Laravel. I have a form data and a file that needs to be submitted with Ajax to the database. The submission process is working as expected but no response is being returned in the success method. Here is the snippet ...

jqueryajaxlaravel

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

javascriptjqueryhtml

Is there a way to align these buttons in the middle?

I am currently designing a webpage at The challenge I'm facing is: How can I center those buttons on the page? They need to remain centered and responsive even when the page is resized. Additionally, the spacing between the buttons is inconsistent. ...

htmlcsstwitter-bootstrapbuttonresponsive-design

(Struggling with storing multiple images in an array using Vue and Firebase)

I'm experimenting with an image slider and I want to streamline the process by uploading images to Firestore and storing them in an array to feed into the slider. I already have code for image uploads, but I'm facing a challenge. Instead of a sin ...

javascriptfirebasevue.js

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

javascriptjqueryhtml

Access denied for generating login hint on target domain in javascript web application for Google sign-in

Utilizing the Google signin Javascript API with the gapi-signin-button on a webapp. The app is being served by a gulp server, binding to 0.0.0.0. Everything works fine during local development, but encountering issues when accessing the page through a publ ...

javascriptauthenticationgoogle-signin

Deciding Between Verdana and Arial: Adjusting Font Sizes with CSS

I have a preference for the font Verdana with a font size of 0.85em. However, I am worried about its availability on different devices. As an alternative, I'm considering using Arial at a font size of 1em instead. font-family: arial; font-size: 1em ...

htmlcssfonts

Invoking a parent controller method from a directive in AngularJS

I have utilized a tree grid plugin from the following link: https://github.com/khan4019/tree-grid-directive and I made some customizations to its template: .directive('treeGrid', [ '$timeout', function($timeout) { return { ...

javascriptangularjsangularjs-directive

Using an image within the input group in Bootstrap 4

I'm a beginner in web development and I'm currently utilizing the glyphicon. This is how I'm currently using it: const className = `form-group ${touched && error ? 'has-danger' : ''}`; <div className={classN ...

javascriptreactjsbootstrap-4