Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.3

Description

Script returning error.

Below is the script that loads the splide.

      $(".splide.media-scroller", context).once("splide-init").each(function () {
        new Splide($(this).get(0), {
          type: 'loop',
          drag: 'free',
          focus: 'center',
          perPage: 3,
          autoScroll: {
            speed: 0.5,
          },
          gap: "1.5rem",
          pagination: false,
          arrows: false,
          padding: "1.5rem",
          mediaQuery: 'min',
          fixedWidth: '65%',
          breakpoints: {
            576: {
              fixedWidth: "41%",
            },
            992: {
              fixedWidth: "30%",
            },
            1200: {
              fixedWidth: "17%",
            },
          }
        }).mount(window.splide.Extensions);
      });

Reproduction Link

No response

Steps to Reproduce

1. Create splide markup.
2. Init the splide using the below code.

      $(".splide.media-scroller", context).once("splide-init").each(function () {
        new Splide($(this).get(0), {
          type: 'loop',
          drag: 'free',
          focus: 'center',
          perPage: 3,
          autoScroll: {
            speed: 0.5,
          },
          gap: "1.5rem",
          pagination: false,
          arrows: false,
          padding: "1.5rem",
          mediaQuery: 'min',
          fixedWidth: '65%',
          breakpoints: {
            576: {
              fixedWidth: "41%",
            },
            992: {
              fixedWidth: "30%",
            },
            1200: {
              fixedWidth: "17%",
            },
          }
        }).mount(window.splide.Extensions);
      });

4. Open console log to see the error.

Expected Behaviour

There shouldnt be any javascript error.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v0.4.2

Description

According to the documentation, I have added the AutoScroll extension.

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';

new Splide( '.splide' ).mount( { AutoScroll } );

After importing AutoScroll the build fails:

Property 'AutoScroll' of type 'AutoScrollComponent | undefined' is not assignable to 'string' index type 'BaseComponent'.

Is that happening only for me?

Reproduction Link

No response

Steps to Reproduce

1. Follow the documentation to use AutoScroll https://splidejs.com/extensions/auto-scroll/
2. Start the project :-)

Expected Behaviour

No build error.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

3.6.12

Description

With the following code:

import Splide from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';


export default function init () {
    const slider = new Splide('.splide', {
        type     : 'loop',
        focus    : 'center',
        autoWidth: true,
        pauseOnHover: false,
        pauseOnFocus: false,
        rewind: false,
        speed: 1100,
        easing: 'cubic-bezier(.14,.1,.5,.7)',
        easing: 'cubic-bezier(.53,.12,.36,.87)',
        drag: 'free',
        easingFunc: t => 1 - Math.pow(1 - t, 2),
        autoScroll: {
            pauseOnHover: false,
            pauseOnFocus: false,
            rewind: false,
            speed: 1,
        },
    })
    .mount({ AutoScroll });
}

I'm getting a "rewind" behavior when trying to click previous slide when the last slide is near the left edge, time after time.

Reproduction Link

No response

Steps to Reproduce

1. Click previous when the last slide is near the left edge — slider rewinds despite setting rewind: false in both options and autoScroll options
2. Click previous again — slider seems stuck in this behavior, which makes it look like it's stuck on the current slide

Expected Behaviour

No rewind behavior, ability to switch slides further and further left

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.3

Description

Currently the speed of the auto-scroll extension is specified in pixel/frame units. Unfortunately, because different devices can operate at different framerates, this can result in the slider moving at different speeds on different devices.

For example, take the demo on the Splide web site at https://splidejs.com/extensions/auto-scroll/#speed. That displays at one speed on my desktop PC (which is 60fps) and a different speed on my Google Pixel 6 (which is 90fps, but can dynamically drop lower to save battery). It does appear that it's about 50% faster on my phone than on my PC. I can send you a video if you like.

I spent many hours yesterday trying to solve this by monitoring the current framerate with fps-observer and changing the Autoscroll speed option on the fly. Unfortunately the results were not very good.

So, now I am looking at modifying the autoscroll extension in some way, to stabilize the speed across devices with different framerates. I don't have any complete solutions in mind but I have some ideas. (calculating fps by measuring the time between RequestAnimationFrame calls, averaging that over time, then using that average value to modulate the speed of the slider so it matches the speed set in the main Splide config.)

First, though, I wanted to check in with you. Does my explanation make sense? Do you think this is worth solving? Do you have any preferred/suggested way of solving it? I can fumble my way through it and submit a PR, but if you have some more elegant way of approaching it, then I would love to hear your thoughts.

Thanks!

Reproduction Link

No response

Steps to Reproduce

1. View the autoscroll demo at https://splidejs.com/extensions/auto-scroll/#speed on a device that is 60fps
2. View the autoscroll demo at https://splidejs.com/extensions/auto-scroll/#speed on a device that is 90fps
3. Note that the two sliders are moving at different speeds.

Expected Behaviour

I expect to see the two sliders moving at the same speed. It is, I believe, reasonable for a designer to want the user experience to have that level of consistency across multiple devices.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.3.3

Description

The splide autoscroll would initialize properly but then freeze and either freeze completely (unless hovered upon) or jerk back to the starting slide (rewind option is set to false)

The console throws up this exact error when it happens

Uncaught TypeError: e.Slides.update is not a function
at ln (splide-extension-auto-scroll.min.js:6)
at cn (splide-extension-auto-scroll.min.js:6)
at i (splide-extension-auto-scroll.min.js:6)

My html structure is as below:-
<div id="franchise-gallery" class="splide">
<div id="franchise-gallery-container" class="splide__track">
<ul id="franchise-gallery-list" class="splide__list">
<li class="franchise-gallery-slide splide__slide loaded"><img src="1.jpg"></li>
<li class="franchise-gallery-slide splide__slide loaded"><img src="2.jpg"></li>
<li class="franchise-gallery-slide splide__slide loaded"><img src="3.jpg"></li>
</ul>
</div>
</div>

And my script code is as below:-
var gallery = new Splide('#franchise-gallery',{
type : 'loop',
drag: 'free',
autoWidth: true,
pagination: false,
arrows: false,
autoScroll: {
speed: 0.5,
rewind: false,
autoStart: true,
pauseOnHover: true
}
}).mount(window.splide.Extensions);
const { Autoplay } = gallery.Components;

* Also tried v3.4 but the script wont even start:-

splide-extension-auto-scroll.cjs.min.js:13 Uncaught ReferenceError: exports is not defined
at splide-extension-auto-scroll.cjs.min.js:13

Reproduction Link

No response

Steps to Reproduce

1. Initialize splide and autoscroll extension as mentioned.
2. Output showing scrolling till the start of 3rd slide and bug occurs.

Expected Behaviour

Scrolling smoothly and wrapping around to the 1st slide again

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v0.5.3

Description

Methods of splide-extension-auto-scroll are not working. Below is sample code for reference.

NOTE:
@splidejs/splide = 4.1.4
@splidejs/splide-extension-auto-scroll = v0.5.3

import { Splide } from "@splidejs/splide";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";

const carousel = new Splide(document.querySelector(".splide"), {
  type: "loop",
  gap: "20px",
  drag: "free",
  pagination: false,
  arrows: false,
  autoScroll: {
    speed: -0.5,
    pauseOnHover: false,
    pauseOnFocus: false,
  },
});
carousel.mount({ AutoScroll });

// !!! NOT WORKING !!!
/** Should ideally pause the carousel, but it is not?? */
carousel.Components.AutoScroll.pause();

Reproduction Link

https://codesandbox.io/p/devbox/splide-autoscroll-issue-cgg4v4

Steps to Reproduce

N/A

Expected Behaviour

Should pause & play with respective methods.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

So basic splide JS works for me perfectly. But then I tried to use this extension for autoscroll and it doesn't work for me. I don't know where is the issue. Everything with pathing should be OK. Could you tell me where am I doing a mistake? I copied normal splide autoscroll file. And in the console, there aren't any errors. So? I am obviously using code for [CDN](https://splidejs.com/extensions/auto-scroll/#cdn-or-hosting-files). I am using this on Localhost. Also I tried to add this extension to the header... But again nothing.

Reproduction Link

No response

Steps to Reproduce

...

Expected Behaviour

Any tips for how to make it work?

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.3

Description

When I clone this repo and run npm install to install dependencies, it results in the following error messages about a broken ts-jest dependency. I was able to resolve this and get the dependencies to install cleanly using npm update ts-jest. I will submit a PR for this issue momentarily.

npm resolution error report

2023-05-03T16:10:59.829Z

While resolving: [email protected]
Found: [email protected]
node_modules/babel-jest
dev babel-jest@"^29.0.1" from the root project
babel-jest@"^29.0.1" from [email protected]
node_modules/jest-config
jest-config@"^29.0.1" from @jest/[email protected]
node_modules/@jest/core
@jest/core@"^29.0.1" from [email protected]
node_modules/jest
dev jest@"^29.0.1" from the root project
@jest/core@"^29.0.1" from [email protected]
node_modules/jest-cli
jest-cli@"^29.0.1" from [email protected]
node_modules/jest
dev jest@"^29.0.1" from the root project
jest-config@"^29.0.1" from [email protected]
node_modules/jest-cli
jest-cli@"^29.0.1" from [email protected]
node_modules/jest
dev jest@"^29.0.1" from the root project

Could not resolve dependency:
peerOptional babel-jest@"^28.0.0" from [email protected]
node_modules/ts-jest
dev ts-jest@"next" from the root project

Conflicting peer dependency: [email protected]
node_modules/babel-jest
peerOptional babel-jest@"^28.0.0" from [email protected]
node_modules/ts-jest
dev ts-jest@"next" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Reproduction Link

No response

Steps to Reproduce

1. Clone the master branch of the repo
2. Run npm install

Expected Behaviour

I expect npm install to complete without errors.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v0.3.7

Description

stops after scrolling on slide and dose not restart after interaction like this https://splidejs.com/extensions/auto-scroll/

Reproduction Link

https://codesandbox.io/s/splide-test-iy87td?file=/index.html

Steps to Reproduce

1. open the link
2. open preview in new window
3. open developer tool
4. wait for a second
5. second issue is
6. open the link
7. and scroll the splide component using mouse or touch it will not start automatically.

Expected Behaviour

excepted behavior should be like this example https://splidejs.com/extensions/auto-scroll/

• splide scroll without stopping.
• splide should continue to scroll after interaction.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.0.2

Description

Seems like whatever (body, wrapping div, div.splide) have CSS attribute transform: rotate(Xdeg) it slows down autoscroll and eventually stop it.

Reproduction Link

No response

Steps to Reproduce

1. Visit https://splidejs.com/extensions/auto-scroll/
2. Add CSS attribute transform: rotate(5deg) to slider or even body
   ...

Expected Behaviour

Autoscroll would work normally.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.0.1

Description

Below is the code I tried using to get the slider to scroll in different direction. It works for a while, but after all images are scrolled once, they just dissapear.

var splide = new Splide("#splidelower", { type: "loop", focus: "center", rewind: true, arrows: false, pagination: false, drag: false, pauseOnHover: false, perPage: 5, autoScroll: { speed: -0.8, pauseOnHover: false, }, }); splide.mount(window.splide.Extensions);

Reproduction Link

No response

Steps to Reproduce

1. Set speed to negative value
2. Watch slider repeat

Expected Behaviour

Images should not be disappearing

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v0.5.2

Description

Negative values (reverse scroll) will not work if SplideJS type is set to "slide". If we use positive value, it will work fine.
Also, if it is set to "loop", everything work as expected.

Reproduction Link

https://codesandbox.io/s/643-forked-le7c7g?file=/src/index.js

Steps to Reproduce

1. Open CodeSandbox link
2. Change type to "loop" or change autoScroll.speed to positive value

Expected Behaviour

Auto Scroll should work from beginning. Now it only works, if we move slider to last image, then it will start to scroll (on negative values).