Enable swipe functionality for mobile users

Looking to make the code below swipable on mobile devices. Any suggestions or resources to achieve this would be greatly appreciated!

<script>
        var links = document.querySelectorAll(".heart");
        var wrapper = document.querySelector("#wrapper");
        var activeLink = 0;
        for (var i = 0; i < links.length; i++) {
            var link = links[i];
            link.addEventListener('click', setClickedItem, false);
            link.itemID = i;
            } 
        links[activeLink].classList.add("active");
        function setClickedItem(e) {
        removeActiveLinks();
        var clickedLink = e.target;
        activeLink = clickedLink.itemID;
        changePosition(clickedLink);
        }
        function removeActiveLinks() {
        for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
            }
        }
        function changePosition(link) {
            link.classList.add("active");
            var position = link.getAttribute("data-pos");
            wrapper.style.left = position;
        }
</script>

Answer №1

If you're looking to enhance the mobile experience of your website, consider implementing the Swiper API into your code. The Swiper API is highly effective on mobile devices and can greatly improve user interaction. Check out the Swiper API documentation here

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

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

There seems to be an issue with the bootstrap carousel where the first slide appears empty initially, but once you slide to the second slide it starts working fine. Navigating through all slides is still possible. <div id="mediakit_carousel" class="car ...

What is the best way to run a function after 10 seconds of inactivity using jquery?

Can anyone help me figure out how to run a function every 10 seconds when the system is idle? Here's an example: setInterval(function () { test(); },10000); //for every 10 Sec I really need assistance in getting this function to ...

Can side effects be safely incorporated within the callback of the useState hook?

Consider this scenario: const [value, setValue] = useState(false); const setSomething = (val) => { setValue((prev) => { fn(); dispatch(action); // or any other side effect return prev + val; }); }; Is it acceptable and in line with ...

bind a class property dynamically in real-time

I need to dynamically generate a TypeScript class and then add a property to it on the go. The property could be of any type like a function, Promise, etc., and should use this with the intention that it refers to the class itself. let MyClass = class{ ...

Encapsulating the React Material-ui Datepicker and Timepicker OnChange event callback functionging

I'm new to React and currently incorporating Material-UI into my project for additional UI components. I've noticed some repetitive code that I'm finding difficult to refactor due to constraints within a Material-UI component's implemen ...

How can we eliminate the 'www' in a URL using NodeJS and Express?

What is the best way to eliminate the 'www' in a URL using NodeJS + Express? For instance, when a client connects to , how can we automatically redirect them to without the 'www'? ...

Using jquery to toggle active nav links in Bootstrap

I'm currently working on integrating a jQuery function to automatically update the active status of the navigation links in my Bootstrap Navbar. The structure involves a base HTML file that extends into an app-specific base file, which is further exte ...

The thickness of the line on the Google line chart is starting to decrease

Currently, I am utilizing a Google line chart in my application. However, I have noticed that for the first two data points, the lineWidth is thick, while for the last two points it is very thin. How can I resolve this issue and ensure that the lineWidth r ...

Is it possible to incorporate Nth child into JavaScript?

Is it feasible to implement an Nth Child in the following code snippet? $(function() { var count = $(".parent a").length; $(".parent div").width(function(){ return ($(".parent").width()/count)-5; }).css("margin-right","5px"); }); ...

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

JavaScript CompleteLink message

Hey there, I've come across a JavaScript code for a countdown timer but need some assistance with it. The issue I'm facing is that within the code, there's a line that displays a message to the user when the timer reaches zero. I want to kn ...

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

When using HTML and JavaScript, I have found a solution that works well for many of the columns I am working with. You can see the details on how to dynamically filter rows of an HTML table using JavaScript here. var filters=['hide_broj_pu',&apo ...

Create a system where three arrays are interconnected, with the first array representing the name of the object

I have a group of different objects structured like this: let object1 = { xyz: 'xyz1', arr: [] }, object2 = { xyz: 'xyz2', arr: [] }, object3 = { xyz: 'xyz3', arr: [] } Manag ...

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

Is there a way to use Puppeteer to take screenshots of a list of URLs?

Within an async function, I have set up a loop to iterate over a list of URLs. The data is sourced from an .xls file that has been converted to .json. My objective is to take a screenshot of each URL in the array, but I keep encountering an UnhandledPromis ...

Filtering an RXJS BehaviorSubject: A step-by-step guide

Looking to apply filtering on data using a BehaviorSubject but encountering some issues: public accounts: BehaviorSubject<any> = new BehaviorSubject(this.list); this.accounts.pipe(filter((poiData: any) => { console.log(poiData) } ...

Javascript function that triggers at the end of a time update

How can I ensure that the alert event is triggered only once at the 15-second mark of a 45-second video? The code snippet below initiates the alert, but how can I modify it to make sure the alert only appears once. var video = document.getElementById("m ...

Looking for guidance on implementing a straightforward nested for loop in a Node.js environment

I am facing an issue with my code that is meant to generate a 10x10 grid. Since transitioning to Node.js, I am struggling to make it work correctly due to my synchronous thinking pattern. Currently, the Y values are being assigned directly to 10 for all X ...

Is it necessary to clear out older node.js sessions that are saved in a database?

After incorporating a database session storage for my node application, I noticed that abandoned sessions could potentially linger in the database indefinitely if a user never returns to the application or clears their cookies. Would it be advisable for m ...

Experiencing difficulties with executing numerous NodeJs queries

Could someone assist with rendering multiple queries in a Nodejs view? The console shows Promise {pending} and I can't figure out what's causing the issue. I'd appreciate any help or guidance on how to fix this problem. router.get('/ ...