What is the reason that the slick slider is unable to remove the class filter?

Having troubles with my slickUnfilter function, even though slickFilter is working perfectly?

Here's a snippet of my HTML:

<div class="slider-wrapper" id="wrapper">
      <div class="post" id="post1"></div>
      <div class="" id="post2"></div>
      <div class="" id="post3"></div>
      <div class="" id="post4"></div>
</div>

This is the code I'm using:

setInterval(function(){
    $('.slider-wrapper').slick('slickFilter', '.post'); 
},10000);

setInterval(function(){
    $('.slider-wrapper').slick('slickUnfilter');
},12000);

You can check out JSFiddle for a live example: https://jsfiddle.net/ajtwz3Lv/8/ Oddly enough, it works in JSFiddle but not when I run it locally.

Answer №1

It seems that in your code on JSFiddle, you have not included the setInterval() functions inside the $(document).ready() block. Make sure to include them there so that the slider-wrapper is initialized by Slick before adding the setInterval().

Sometimes platforms like JSFiddle automatically wrap all JS code within $(document).ready(), which could be why it's functioning correctly there.

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 use Promise.all() to delay the return of an array that is currently being constructed within the function?

In the following code block, I am trying to set an array as the value for a local variable by calling a function that returns an array. The issue arises because the Promises in the second function are not resolved until after the array has been returned to ...

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

Transitioning from Event-driven Object Oriented design to Redux structure

I currently have a structure that is mostly object-oriented and I am considering migrating to React/Redux due to handling issues with events. I have various modules with objects structured like this: User { getName() getSurname() etc... } These obj ...

Lazy loading images in a grid using React's react-lazy-load component

In my React application, I have a grid of images. To show these images in the div grid, I am utilizing sprites where each set of 10 divs uses a single URL to display the thumbnail. With approximately 16000 thumbnails to showcase, I decided to implement rea ...

What is the best way to ensure data validation occurs only when a button is clicked

In my project, I am faced with the challenge of validating inputs only after a submit button is clicked. However, I have noticed that the required rule is being activated after losing focus. This issue arises while using VeeValidate in Vue.js. Here is the ...

React Checkbox malfunctioning: Troubleshooting and solutions

I have thoroughly researched for a solution to my issue before resorting to posting this question. Unfortunately, none of the answers I found seemed to resolve my problem. Despite trying various methods such as changing, clicking, and checking, my checkbo ...

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

How can I use AJAX to send a dynamically generated PDF file?

I utilized jsPDF to create a PDF object. My goal is to send an email with a PDF attachment using AJAX, but I am facing issues in sending the file correctly. I attempted to convert it into a Blob object for transmission and later decode it to base64 in PHP ...

Why does my Javascript cross-domain web request keep failing with a Status=0 error code?

UPDATE: I've been informed that this method doesn't work because craigslist doesn't have an Allow-Cross-Domain header set. Fair point. Is there an alternative way to download a page cross-domain using Javascript in Firefox? It's worth ...

Uh-oh: create-react-app installation has been canceled

As per the guidelines provided in Reactjs documentation: To start a new project, you must have Node version >= 8.10 and npm version >= 5.6 installed on your system. Use the following command to create a project: npx create-react-app my-app My envir ...

Node.js routing currently lacks the ability to easily verify the presence of a JWT token for every route

I have a node application where, upon routing to ('/login') with valid credentials, I generate a JWT token with an expiry time and direct the user to the next page. If the user tries to access any other route directly (e.g., '/home') af ...

Store the result of the previous AJAX call in a jQuery variable and combine it with the data from the next AJAX response

I am working on a program where I retrieve price values using ajax. My goal is to add the previous price value to the current price value when it is retrieved again. The issue I am facing is that each time I get a new price value, it overrides the previou ...

Issue with JSON-to-MUI card mapping causing absence of UI components or error messages

I'm facing a challenge with mapping this JSON data to MUI Cards. Despite no error messages, the content isn't being displayed as expected. Surprisingly, when I make changes unrelated to the issue, the console.log(questionGroups) only shows the JS ...

Can an event be passed from one Vue.js component to another without relying on a global EventBus?

I have two independent components that are not directly related to each other. However, I want them to be able to communicate so that when an event is triggered in one component, the other component can respond accordingly. For example, let's conside ...

Is it possible to store a node's expression request in memory? Or is there a different method available to pause a request and await another one?

In our node app, we are utilizing express to interact with a web service that allows us to send text messages through our service provider. The process goes as follows: A client application, whether it be a web app or another node app, requests to send a ...

Difficulty with MultiHandleSliderExtender and postback in JavaScript

Attempting to implement the multihandlesliderextender (from the Ajax Toolkit) for creating a price filter option on a webshop. Upon selecting a new price, it should trigger a reload of everything including extensive behind-the-scenes code. Referenced an a ...

Leverage the Power of Mongoose Schema Across Various Files (mongoose)

I recently encountered an issue while trying to utilize my Permissions schema in two different files. The error message "Cannot overwrite 'example' model once compiled" keeps popping up. Query: How can I effectively employ my Permissions schema ...

What are the best practices for securely storing a distinctive client identifier for websockets?

In order to differentiate and identify the specific client sending a request through web-sockets, I require a unique client identifier. However, I'm uncertain about the optimal method for storing this identifier so that it can be included with every s ...

How to extract keys from an object using jQuery

I am currently working on implementing a Modal in bootstrap 5. I found a helpful guide at http://jsfiddle.net/341tfz8j/1/. I made the necessary changes to update the references from bootstrap 4 to bootstrap 5, such as changing data-toggle to data-bs-toggle ...

NodeAutoComplete: Enhanced Autocompletion for Node.js

I am attempting to utilize autocompletion of a JavaScript file with Node.js and Tern. However, the documentation for Ternjs is incredibly lacking. const tern = require("tern"); const ternServer = new tern.Server({}); const requestDetails = { "qu ...