Utilizing Javascript in Owl Carousel 2 to Filter Items While Preserving the Sort Order

Currently, I am utilizing Owl Carousel 2 in combination with a filtering example to create a filter menu. When titles in the filter menu list are clicked, all other items in the carousel disappear. This functionality works flawlessly, except for the fact that when "SHOW" is clicked and all items return to the carousel, they are not in their original order.

If you're interested in Owl Carousel 2, check out their API options here.

For more information on filtering, you can visit this link: .

I am seeking a solution to maintain the sort order of the items. Perhaps there is a better way to filter them using simply CSS display:none? If anyone has expertise in altering scripts or devising a better filtering solution while preserving the order, your help would be greatly appreciated. Thank you!

javascriptjquerycssfilteringowl-carousel

Answer №1

To solve the issue, I discovered that by duplicating all items within the concealed section, and then upon filtering, clearing out the carousel and reintroducing only the filtered elements in their original sequence, the problem is resolved.

See it in action here: http://jsfiddle.net/XYZ123/456/

$('#projects-copy .project.' + category).each(function () {
   owl.addItem($(this).clone());
});

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

ES5 enables the extension of classes in React

This ES6 syntax works fine for me: import {Component} from 'react'; class A extends Component {} class B extends A { // I can redeclare some methods here } But how would one implement this using ES5? Like so: var React = require('reac ...

javascriptclassinheritancereactjs

Revolutionize your website with dynamic jQuery scripts

I am currently in the process of moving data from 'table_source' to 'table_dest'. The challenge I am facing is that 'table_source' is created using a repeater, which dynamically generates table IDs. However, I require the elem ...

c#jquery

JavaScript form validation involves using client-side scripting to ensure that

I'm currently working on form validation, but I'm unsure if I'm overcomplicating things. I have a variable that compares elements and replaces an image with a checkmark for success or an X for failure upon successful validation. The function ...

javascriptformsvalidation

What occurs in Node.js sockets when the FYN packet is missing?

I currently have two node.js servers set up, with one of them establishing a socket connection to the other and regularly sending data. For example: client.js: io = require('socket.io'); var socket = io.connect(IP_SERVER + ':' + PORT ...

javascriptnode.jssockets

Can webpack integrate React components from a package and then recompile the package?

I am currently in the process of creating an npm package to standardize my layout components that are based on geist components. Initially, I attempted to use the npm package as a local component, but encountered a webpack loader error when trying to read ...

javascriptreactjsnpmwebpackjsx

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

javascripthtmlangularjs

'The transform3d' property does not apply to fixed-positioned children

I am facing an issue where a fixed div is not being positioned correctly when a parent element has a translate3d transform applied in CSS. I have tried various options like webkit-transform and transform-origin, but without success. Below is a simplified ...

htmlcsscss-positioncss-transforms

CSS has the ability to override the fill color of paths on an SVG map

An SVG map on my website contains over 20 areas, each with a unique color defined within the HTML of the map. However, there seems to be an issue where the fill color of the path(s) is not displaying correctly due to the CSS stylesheet overriding it. The ...

htmlcsssvg

Working with a single quotation mark in JavaScript and HTML

This is a question that I have posed previously, and although it may seem straightforward, I have yet to receive a response. I am looking for a way to include a single quote (') in a string. While I am aware that using double quotes can circumvent t ...

javascriptjqueryhtml

Having trouble with the function not running properly in HTML?

I'm having trouble implementing a copy button on my HTML page. Despite no errors showing in the chrome console, the text just won't copy. Below is a snippet of my HTML code: <!doctype html> <div class="ipDiv tk-saffran"> <div c ...

javascripthtmlcopy

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

I am currently developing a web map that requires toggling two GeoJSON layers on and off. In the past, I used Mapbox JS to accomplish this task by adding and removing layers with a custom HTML button click. However, I am facing some challenges in achieving ...

javascripthtmlcssmapbox-gl-jsmapbox-gl

What is the best way to insert an iframe using getElementById?

I am looking to make some changes in the JavaScript code below by removing the image logo.png lines and replacing them with iframe code. currentRoomId = document.getElementById('roomID').value; if ( document.getElementById('room_' + c ...

javascript

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Just exploring my culture. I have grasped the concept of the reduce principle var sumAll = function(...nums: number[]):void{ var sum = nums.reduce((a, b) => a + b , 0); document.write("sum: " + sum + "<br/>"); } sumAll(1,2,3,4,5); The r ...

javascriptarraystypescriptreduce

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...

javascripthtmlcss

Shifting v-slot references into a Vue.js component - tips and tricks!

I'm struggling to understand how to transfer the v-slot data into a component. Suppose I want to restructure the code below: <template v-slot:item="data"> <template v-if="typeof data.item !== 'object'"> <v-list-item-co ...

javascriptvue.jsvuetify.js

Removing a user via Fetch API in the delete endpoint

Creating a user website that allows the admin to delete users is my latest project. I've implemented it using an Azure SQL database and have set up an endpoint called deleteUser in my controllers file. deleteUser const deleteUser = (req, res) => { ...

javascriptnode.jsazureejs

Optimizing Chrome's Precious Load Time

Encountering issues with Chrome browser auto-filling passwords, usernames, etc. Creating a problem where input field validation for emptiness is not possible in Chrome while it functions correctly in other browsers. $(document).ready(function() { ...

javascriptjquerygoogle-chrome

Ajax requests function properly only on one occasion

My select option works perfectly the first time, but then the request does not execute again. I suspect that the issue lies with the 'onchange' event. Here is my Ajax code : jQuery(document).ready(function($) { $('#referenceProduit') ...

javascriptjqueryajax

Different option to chained promises

In an attempt to develop a function that acquires a presigned s3 URL (call 1) and performs a PUT request to s3, I find myself contemplating the usage of a nested promise structure, which is commonly recognized as an anti-pattern. Outlined in JavaScript/ps ...

javascriptes6-promise