Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish.

Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers?

Here is my Swiper configuration in Vue:

this.swiper = new Swiper('.swiper-brand-container', {
      loop: true,
      spaceBetween: 120,
      slidesPerView: 'auto',
      centeredSlides: true,
      nested: true,
      speed: 5000,
      autoplay: {
        delay: 0,
      },
    });

Below are the functions for stopping and starting the autoplay:

stopAutoplay() {
      if (this.swiper) {
        this.swiper.autoplay.stop();
      }
    },
startAutoplay() {
      if (this.swiper) {
        this.swiper.autoplay?.start();
      }
    },
  1. I attempted to recreate the swiper without autoplay
  2. Tried manipulating the swiper container through styles
  3. Dynamically changing parameters

Despite my efforts, I couldn't find a solution to stop the transition immediately upon hover.

javascriptcssvue.jsswiper.jsautoplay

Answer №1

Check out these options

<template>
  <div
    class="swiper-brand-container"
    @mouseenter="stopAutoplay"
    @mouseleave="startAutoplay"
  >
    <!-- Your Swiper content goes here -->
  </div>
</template>

Alternatively, consider using this code snippet

<template>
  <div
    class="swiper-brand-container"
    @mouseenter="freezeSlider"
    @mouseleave="unfreezeSlider"
  >
    <!-- Your Swiper content goes here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiper: null,
      isFrozen: false,
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      this.swiper = new Swiper('.swiper-brand-container', {
        loop: true,
        spaceBetween: 120,
        slidesPerView: 'auto',
        centeredSlides: true,
        nested: true,
        speed: 5000,
        autoplay: {
          delay: 0,
        },
      });
    },
    freezeSlider() {
      if (this.swiper && !this.isFrozen) {
        this.swiper.autoplay.stop();
        this.swiper.params.autoplay.delay = 0;
        this.swiper.params.speed = 0;
        this.isFrozen = true;
      }
    },
    unfreezeSlider() {
      if (this.swiper && this.isFrozen) {
        this.swiper.params.autoplay.delay = 5000; // Back to default
        this.swiper.params.speed = 5000; // Back to default
        this.swiper.autoplay.start();
        this.isFrozen = false;
      }
    },
  },
};
</script>

Answer №2

Unable to find a solution or receive any advice, I had to take matters into my own hands. The only option I could think of was to manually scroll through the content.

stopAutoplay() {
      if (this.swiper) {
        clearInterval(this.interval)
      }
    },
    startAutoplay() {
      const slideCount = this.swiper.slidesGrid.length
      this.interval = setInterval(() => {
        this.translate = this.translate + 30
        if (this.translate > this.swiper.slidesGrid[slideCount - 3]) {
          this.translate = this.swiper.slidesGrid[0]
        }
        this.$refs.wrapper.style = `transform: translate3d(-${this.translate}px, 0px, 0px)`
  
      }, 500)
    },

I created an interval where every half second, the block moves by a few pixels. To stop the scrolling, I clear the interval.

While it's not perfect, I'm open to suggestions on how to enhance this method. Feel free to share your thoughts!

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

Is there a way to make my code on Google Sheets work across multiple tabs?

My Google Sheets code successfully pulls information from the main tab into my CRM Software every time someone fills out a form online. However, I'm struggling to get the script to run for multiple tabs on the same spreadsheet. I've tried a few s ...

javascriptgoogle-apps-scriptgoogle-sheets

Enhancing User Experience with JQuery Pagination and Efficient Data Loading

I am looking to implement pagination for data retrieved from a database. The information needs to be displayed in a 4x4 table format. For the remaining data that doesn't fit in the initial view, I want to enable pagination with AJAX functionality so ...

javascriptjqueryajax

What is the best way to determine the moving average of an Object value within an array?

In my dataset, I have an array called 'scores' that contains 4 objects. export const scores = [ { day: '1', Barcelona: 1, Real: 3, Valencia: 0}, { day: '2', Barcelona: 4, Real: 6, Valencia: 3}, { day: '3', Bar ...

javascriptarraysjsonreactjsobject

Pressing "Enter" initiates the submission of the form

My webpage contains a stylish GIF displayed as a button within a div. The script inside the div triggers a click event when the ENTER key is pressed, using $(this).click(). This click action has its own functionality. Everything functions smoothly in Fire ...

javascripthtmljquery

Using React-Testing-Library to Jest TestBed Hook in TypeScript for Jest Testing

I'm currently facing a challenge while attempting to integrate the react-hooks library with Formik, specifically using useFormikContext<FormTypeFields>() in TypeScript within my project. I have certain fields where I want to test the automation ...

javascriptreactjsunit-testingreact-hooksjestjs

When attempting to compress JavaScript with uglify-js, an unexpected token error occurs with the symbol ($)

When attempting to compress Bootstrap 4 js file using uglify-js, I encountered an error. The error message reads as follows: "Parse error at src\bootstrap\alert.js:1,7 import $ from 'jquery' ERROR: Unexpected token: name ($)". Now I am ...

javascriptjquerynode.jsbootstrap-4uglifyjs

Sending a 2-dimensional array from JavaScript to the server using AJAX

My JavaScript code involves working with a 2D array. var erg = new Array(); for (var i in val) { erg[i] = new Array(); for (var j in val[i]()) { erg[i][j] = val[i]()[j](); } } However, I encountered an issue where only the 1D array ...

javascriptajaxjqueryasp.net-ajax

Modify the height of an element in real-time using jQuery

I'm looking to dynamically adjust the height of a div based on another element, but only if that element does not have the class collapsed (which is used in a Bootstrap toggle collapse feature). The initial setup seems to work fine, however, when I i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Insufficient allocation - memory overflow in loopback.js

I encountered an issue while trying to fetch large data using loopback.js. The error message I received was: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory <--- Last few GCs ---> 45903 ms: Mark-sweep 1385.6 (14 ...

javascriptnode.jsnpmloopbackjs

EaselJS BitmapAnimation has delay when using gotoAndPlay

I have created a requirejs module that enhances the functionality of a BitmapAnimation by allowing it to move around the stage at a specific speed and transition to another looped animation once reaching its destination. The issue I am encountering is a n ...

javascripteaseljs

Replace the # symbol with #! in Vue.js router

My client is interested in using AJAX crawling, even though it is deprecated. They want to utilize it because of another search engine that still supports it, such as yandex.ru. More information can be found here. I need to convert this link to this form ...

vue.js

Redux Dilemma: Stagnant Data in Redux Repository

Struggling to pass data fetched through axios into the Redux store for use in another component. While other actions and reducers are functioning correctly, this one seems to be causing issues. Here is the flow of data: Begin in the Filter component comp ...

javascriptreactjsreduxreact-reduxreact-props

issues related to implementing search functionality with react-redux

Just starting out with my first react-redux project which is a list of courses, but I have hit a roadblock with redux. I am trying to implement a search functionality based on this answer, and while I can see the action in redux-devtools, it's not ref ...

javascriptreactjsreact-redux

Organizing AngularJS ng-repeat into sets of n items

I am facing a challenge with a data set structured like this: $scope.items = [ { model:"A", price: 100, quantity: 30}, { model:"B", price: 90, quantity: 20 }, { model:"C", price: 80, quantity: 200 }, { model:"D", price: 70, quantity: 20 ...

javascriptangularjs

tips for iterating through a json string

When retrieving data from PHP, I structure the return like this: $return['fillable'] = [ 'field_one', 'field_two', 'field_three', 'field_four', 'field_five', ]; $json = json_ ...

javascriptphpjqueryjsonajax

How can information be effectively passed from the controller to Vue.js within the Laravel-Vue.js framework?

This is my first time attempting this approach and I seem to have hit a bump in the road. Although I have successfully set the data in the controller, added the mycourses entry, it doesn't seem to be appearing as expected. The rest of the data is com ...

laravelvue.js

What is the method for including an additional header in a post request using vue-resource?

In my application, there are several post requests that require an extra header with the key token. I am facing difficulties in appending this header to the requests. The code I have tried so far involves checking for the presence of a token and then appe ...

vue.jsvue-resource

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page. <!doctype html> <html> <h ...

javascripthtmlcssloopsfor-loop

Navigating between two Vue2 applications

I currently have two applications, app1 and app2. App1 serves as a website at www.wxample.com with a button. My goal is to implement code in app2 that allows me to click the button on app1 and be redirected to the Login Panel in app2 for the workers module ...

javascriptvue.jsvuex

Filter your DataTables columns by searching for text within a specific range

Below is the code for implementing a text range filter in SQL: function fnCreateTextRangeInput(oTable) { //var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch; th.html(_fnRangeLabelPart(0)); var sFromId = oTable. ...

javascriptjqueryfilterdatatables