Save the currently active index of the mySwiper element even after the page is

After clicking through the carousel, I want to be able to store the current index and slide back to it after a page refresh. Is there a way to save this value in a variable so that I can use the mySwiper.slideTo() method to return to the last index?

In simpler terms, I want to click on a project slide, navigate to the project page, and then easily go back to where I left off in the carousel when returning to the main page.

If you have any tips or suggestions on how to achieve this, I would greatly appreciate it! Thank you!

javascriptswiper.js

Answer №1

Utilizing LocalStorage can be a great solution for storing key value pairs that need to persist in the user's browser.

Check out this link for more information on using LocalStorage

In your specific case, you can save the index when the touchEnd event is completed like this:

window.localStorage.setItem('slider-index', index)

To retrieve the stored index later on, you can use the following code:

window.localStorage.getItem('slider-index');

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

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

javascripthtmljson

The AXIOS method in Express.js is designed to return a Promise object that may contain an

I am currently learning ExpressJS and Axios I have created a folder named utils and placed the axios.js file const axios = require('axios'); loadDataPesan=async function(opts){ axios.get('localhost/getData', { params ...

javascriptnode.jsexpressaxios

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

javascriptjquerycsscustom-data-attribute

What causes the 'cannot read properties of null' error when using dot notation in React, and what are the possible solutions to resolve it?

When I employ the conventional method of accessing objects using dot notation {quote.text} {quote.author}, I encounter a "cannot read properties of null" error message. import { useState, useEffect } from 'react'; import "./React.css"; ...

javascriptreactjs

Prevent the default scroll event triggered by the mousewheel in certain situations. It is not possible to use preventDefault within a passive event

I have a div element with the onWheel attribute. By default, the browser interprets onWheel as scroll behavior. However, I want to prevent the browser's default mouse behavior under certain conditions. Unfortunately, I encountered an error that say ...

javascriptreactjs

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

javascriptjqueryhtmlangularjs

Guide to dynamically using array.map based on a condition in React

I am encountering an issue with a modal screen that contains two dropdowns and a text input field. The problem arises when the second dropdown is set to “is empty”, as the text input field should then disappear, leaving just the two dropdown inputs on ...

javascriptreactjsarraysconditional-statementsjsx

Utilizing auto-generated Nonce for Content Security Policy in a Node.js/Express web application

I've exhausted all possible solutions in my attempt to create a nonce and pass it successfully to the CSP and inline scripts with the nonce variable. Despite reading numerous articles, the guidance on accomplishing this task remains vague. Fortunately ...

javascriptnode.jsexpresscontent-security-policy

Using Primeng to implement pagination and lazy loading in a dataView

Looking for a way to search through product data with filters and display it using primeng dataview? Consider implementing pagination in your API that pulls products from the database page by page. Set the products array as the value in dataview so that wh ...

javascriptangularprimengprimeng-datatable

The Node/Express Rest API appears to keep directing requests to the same controller function, despite the mappings being correctly

Currently, I am in the process of developing a node/express REST API. When making requests to the following endpoints: http://localhost:5000/api/news and http://localhost:5000/api/news/?id=c5f69d56be40e3b56e55d80 I noticed that both URLs trigger the same ...

javascriptnode.jsrestexpressmean-stack

A TypeScript class transferring data to a different class

I have a set of class values that I need to store in another class. function retainValues(data1,data2){ this.first = data1; this.second = data2; } I am looking for a way to save these class values in a different class like this -> let other = NewC ...

javascriptarraystypescriptclass

Using Ajax to call a PHP function within a WordPress website

I am looking to trigger a PHP function using AJAX. Below is the code snippet of my form: <form class="woocommerce-form woocommerce-form-login login" method="post"> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-ro ...

javascriptphpajaxwordpress

Encountering an error when attempting to iterate over an undefined property using an API

I am trying to fetch all classes and their assignments from Google Classroom. I successfully used Google's example code for listing the classes, but had to write my own code for listing the assignments. While the code runs as expected and lists the as ...

javascriptnode.jstypescriptgoogle-classroom

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

Executing NodeJS custom middleware to show parent function being called

Goal: Showcase the parent function of a middleware function shared = require('./RoutFuctions'); app.post('/link', shared.verifyToken, (req, res) => { ... } In the middleware function exports.verifyToken = functio ...

javascriptnode.jsexpressecmascript-6routes

Chained module incorporating a specialized Angular form validation directive

I've been working on incorporating an angular form validation "plugin," but I've hit a roadblock trying to utilize the directive in a child module. As a test, I'm using the HighlightDirective example. @Directive({ selector: '[highligh ...

javascriptangularjs

NodeJS API integration failure during ReactJs login attempt

Currently, I am tackling a small project on implementing user login functionality in ReactJs with Nodejs and Express-session. The issue I am facing is that my front end (React login page) isn't functioning properly. Below is the Fetch API code snippet ...

javascriptnode.jsreactjs

Locate every instance of items in an array within a string

My files have a structure similar to this: https://i.stack.imgur.com/KyaVY.png When a user conducts a search, they send an array to the backend. This array always includes at least one element. For example, if they send ['javascript'] to the b ...

javascriptmongodbmongoose

Is there a way to programmatically display an edit text field on an HTML page?

Currently, I have a straightforward task which involves pulling data from a MySQL database to display in an HTML table. Here is the current script: <html> <body> <table border='1'> <?php mysql_connect('url',&ap ...

phpjavascriptjquery

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

javascripthtmljquery