Can you please explain how to switch the focused slide by clicking on a specific slide in swiper.js?

When using swiper in centeredSlides mode with the loop option set to true, I want a clicked slide to become the centered slide in the swiper carousel. Swiper provides me with the index of the clicked slide, but how can I use it to change the centered slide?

These are my custom options:

  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
  on: {
    click() {
      console.log(this.clickedIndex);
    },
  },
javascriptswiper.js

Answer №1

Here is an example:

let carousel = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 10,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  initialSlide: 0,
  on: {
    click() {
        console.log('index clicked:', this.clickedIndex);
        carousel.slideTo(this.clickedIndex);    
    },
  },
});

Visit Codepen for a live demo: https://codepen.io/Terrafire123/pen/gOwbjMy

Answer №2

To activate the feature, simply change the value of slideToClickedSlide to true. Once set, clicking on any slide will transition to that specific slide.

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

Struggling to calculate the total of a property within an array of objects

I'm currently trying to calculate the sum of a specific property within an array object. Although I successfully accomplished this in one component, I am encountering difficulties replicating it in another. The error message being displayed is: this. ...

javascriptvue.js

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

I am in the process of developing a function that takes a boolean indicator object like this: const fruits = { apple: false, banana: false, orange: false, mango: false, }; Along with an array such as ['apple', 'orange']. The go ...

javascripttypescriptobjecttypesreduce

Sophisticated method for arranging three integers in javascript in descending order, followed by analyzing their relative distances

In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...

javascriptjquerysortingcompare

Using Jquery to locate the next div element

I've created this code snippet, but it's not functioning as expected. However, by reviewing it, you can understand my intended outcome: $('.jfmfs-alpha-separator').filter(function() { return ($(this).next().not(".hide-filtered"). ...

javascriptjquery

Adding external JSON data to a plain HTML document can be achieved through the process of

I have been experimenting with extracting data from an API in JSON format, but I am struggling to figure out how to convert the JSON tags into HTML elements. You can view a sample of the JSON data here. Does anyone know how to transform this JSON into DI ...

javascriptjqueryhtmljsonapi

Using Javascript, populate an array with Enum variable values

Hey there! I've got this code that creates an array from an enum variable in JavaScript, but it's looking a bit old and clunky. I'm curious if any JavaScript or jQuery experts out there have a cleaner (best practice) approach for achieving ...

javascriptjqueryarraysenums

Getting the Featured Image from a Post Link in Wordpress: A Step-by-Step Guide

For my Wordpress project, I have a group of links leading to inner pages, each with their own featured image. These links are created using the menu feature in Wordpress. My goal is to allow users to click on these links and have the featured image from t ...

javascriptphpjquerywordpress

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Issue with Angular translation when utilizing a dynamic key variable

I am currently developing a project with Angular Js and incorporating the Angular-translate module In a specific scenario, I encountered an issue where the translation key needed to be stored as a variable. To address this, I created an object within the ...

javascriptangularjsangular-translateangular-transitions

Retrieving a JavaScript variable from a different script file

I have a JavaScript script (a) with a function as follows: function csf_viewport_bounds() { var bounds = map.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); var maxLat = ne.lat(); var maxLong = ne.lng(); ...

javascriptjquerygoogle-mapsscope

Tips for saving the ajax response to the browser cache using jquery

I am currently working on storing the ajax response in the browser cache. I have successfully managed to store it for URLs like (example.com), but now I am facing a challenge with storing data for URLs like (example.com?xyz=abc%20efg&mno=hjk). Here is ...

javascriptjqueryajaxcachingbrowser-cache

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

When using ts-node, I encountered the following error: $ ts-node index.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/projects/node-hddds8/index.ts I attempted to remove "type": "module& ...

javascriptnode.jstypescript

React useEffect only retrieves the last element of an array object

I am facing an issue where React seems to only save the last element in my array. Even though I have two elements, when mapping over them, only the last element is being placed in the hook each time. React.useEffect(() => { if (bearbeiten) { handleCli ...

javascriptreactjsreact-nativereact-hooksuse-state

What is the most effective method for integrating additional CSS/JS libraries into a GitHub repository?

I would like to integrate FontAwesome, Bulma, jquery, and jquery-ui into one of my Github repositories for the front-end section. Currently, I am including the JS files or CSS files from these projects in my own JS/CSS folders, but I believe there might ...

javascriptjquerycssgitgithub

Refreshing JSON data every 10 seconds using SVG/D3

What is the best way to program a D3/json/ajax query that retrieves new data every 10 seconds? Here is my initial attempt at a solution, but I believe it may not be ideal: setInterval(function() { d3.json("http://1.....", function(json) { .... }) ...

javascriptsvg

Exploring the File Selection Dialog in Node.js with TypeScript

Is it possible to display a file dialog in a Node.js TypeScript project without involving a browser or HTML? In my setup, I run the project through CMD and would like to show a box similar to this image: https://i.stack.imgur.com/nJt3h.png Any suggestio ...

javascriptnode.jswindowstypescriptfile

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

When loading dynamic content, I use the following method: $('#my-div').load('my.html'); The code inside my.html looks like this: <html> <head> </head> <body> <script> $(fu ...

javascriptjqueryhtmlajax

Tips on presenting our data using JSON structure

Hey there! I'm new to Next JS and I'm looking to showcase the data from my index.js file in JSON format in my dynamicid.js file. Can anyone guide me on how to achieve this? index.js In my index.js file, I currently display my output but now I ...

javascriptreactjsgoogle-sheetsnext.js

Retrieve new data upon each screen entry

After running a query and rendering items via the UserList component, I use a button in the UserList to run a mutation for deleting an item. The components are linked, so passing the deleteContact function and using refetch() within it ensures that when a ...

javascriptreactjstypescriptgraphqlreact-apollo

Adding a class to a clicked button in Vue.js

A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' lo ...

javascriptcssvue.jsvuejs2vue-component