We can use https://picsum.photos/ instead of using the same photos over & over :)

On this https://swiperjs.com/swiper-api#parameters page, the onAny parameter is not listed correctly.

It is listed at the end of the list and only the name is indicated

while in the swiper-options.d.ts file it is described as follows:

Thanks.

touchRatio is mentioned in the docs, but I can't find anything describing what it actually is/does:

Link to docs: https://idangero.us/swiper/api/#parameters

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.

• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.

• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP).

What you did

EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.

Expected Behavior

EXPLAIN WHAT IS TO BE EXPECTED, HERE.

Actual Behavior

EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

When using a custom build swiper I had to guess quite a lot in order to find out, what modules are actually needed for freeMode. Figured the missing one was Navigation.

Since this isn't obvious: should we document this somewhere? I haven't found a good place yet. Should we mention it in the custom build section directly?

I'm happy to create a PR - just need a little guidance here :)

❤️

Since yesterday

due to a check of AVAST antivurs your site https://swiperjs.com cannot be reached
security issue: URL:scam

the connection was interruped because the site is infected with URL:scam

Problems: I cannot read documentation and other pages; the demos are not available

Hello,
http://joxi.ru/krDgaDjFEeWaZA
problem here
http://joxi.ru/82QjJ5OcjX6nkA
v.4.4.5

This is a (multiple allowed):

• bug
• enhancement
• feature-discussion (RFC)

The API documentation on the website doesn't display Thumbs as a component. It took me forever to figure out why my thumbs weren't connecting/working.

After I did this it started working.

import Swiper, {Thumbs} from 'swiper';
Swiper.use([Thumbs]);

https://swiperjs.com/api/#custom-build

module.exports = {
  // remove components you don't need
  components: [
    'virtual',
    'keyboard',
    'mousewheel',
    'navigation',
    'pagination',
    'scrollbar',
    'parallax',
    'zoom',
    'lazy',
    'controller',
    'a11y',
    'history',
    'hash-navigation',
    'autoplay',
    'effect-fade',
    'effect-cube',
    'effect-flip',
    'effect-coverflow',
  ],
  // default color of navigation elements
  themeColor: '#007aff',
  // additional color to be included
  colors: {
    white: '#ffffff',
    black: '#000000',
  },
};

we forgot it in Next.js version

The Zoom example has a typo in the slide class.

• Expected: swiper-slide
• Actual: swiper-side

Small typo in mousewheel.eventsTarged, should be eventsTarget?

You'll need to find and replace all instances.

If you go here:
https://swiperjs.com/swiper-api#methods-and-properties

And scroll down to the 'Methods' section, you'll see examples of how to use addSlide() and appendSlide():

addSlide(1, '<div className="swiper-slide">Slide 10"</div>')

addSlide(1, [
 '<div className="swiper-slide">Slide 10"</div>',
 '<div className="swiper-slide">Slide 11"</div>'
]);

I changed those to just 'className=' parts to just 'class=', and things started working.

It's either a small oversight, or maybe because i'm using Vanilla JS (no other frameworks/Angular/Vue/etc).

I see a few other refs in the docs that mention 'className' in this way.

I would try to update the docs myself, but:

1. i'm not sure on this, and
2. i can't find the docs here.

Seems like mySwiper.disableKeyboardControl() and mySwiper.enableKeyboardControl() are not used any more: http://idangero.us/swiper/api/#methods
In swiper now there are swiper.keyboard.enable() and swiper.keyboard.disabled() methods available.

Would be great to use http://docusaurus.io/ for docs so content can be in markdown. Also these docs should be with the plugin sourcecode so it's easy for people to find without having to use the website. Secondly, there's no docs for v3 that I can tell in this repo.

In the documentation, the properties and methods of Navigation, Pagination and Scrollbar are shown without the name of their module (swiper.navigation, swiper.pagination and swiper.scrollbar)

https://swiperjs.com/swiper-api#navigation

https://swiperjs.com/swiper-api#pagination

https://swiperjs.com/swiper-api#scrollbar

Could it be related to these changes nolimits4web/swiper#4507 ?

Also, the type is not shown for the bullets property of pagination (which in the pagination.d.ts file is defined as Dom7Array[])

Thanks.

This is more a heads up than an issue. When trying to edit the demo on Stackblitz, JS and CSS are not loaded because the version is not specified and version 6 is using a different folder structure, so the user needs to specify the version (i.e. https://unpkg.com/swiper@5/css/swiper.min.css similar for js file) or make sure to change the url (https://unpkg.com/swiper/swiper-bundle.min.css similar for js file).

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.

• Platform/Target and Browser Versions: Any.

• Live Link or JSFiddle/Codepen or website with issue: https://stackblitz.com/edit/swiper-demo-1-default?&file=index.html

What you did

Try to edit demo in Stackblitz.

Expected Behavior

Swiper working properly with CSS implemented.

Actual Behavior

CSS and JS not loaded when using it from CDN.

PS: If this should not be open as an issue, I apologize and would be happy to be informed how to proceed in similar situations.

I use the flip mode in the loop to display a two-sided ticket. There are buttons on the ticket that open a map view.
If I push the ticket vigorously, the slider automatically ends the rest of the rotation by itself (the "ionSlideDidChange" event is triggered). If I turn the ticket once, I see the back, if I turn the ticket again I see the front. So far everything works.
The problem occurs when I drag the ticket to the other side (i.e. turn the flip mode more than 50% and let go, then the turn to the other side is also ended). You can see the other side and everything seems to be normal at first glance, but the "ionSlideDidChange" event has not triggered and the buttons on the ticket do not work.

Most of us viewing the demos page surely are developers on desktops with good connections.

Has to be in the 90 something percentile.

Scrolling through these waiting for them to load is kind of a bummer.

Research only gives me old examples that haven't worked in the past for me aswell.

Let's say I want to update slidesPerView either with a ResizeObserver or maybe even at the click of a button?

const swiper = new Swiper('.element', {
  loop: true,
  pagination: {
    el: '.my-pagination',
    clickable: true,
  },
});

const changeSlidesPerView = (x) => {
  swiper.params.slidesPerView = 2;
  swiper.update();
  // `reInit()` doesn't exist anymore
  // kill/destroy and then create new slider?
};

It would be great to have a dedicated example or maybe even page on the website explaining your proposed way of changing swiper params

from "enabled()" to "enable()"

Ref nolimits4web/swiper#4709 (comment)

@nolimits4web after the last update the getBreakpoint method is still present in the list and !INTERNAL is indicated in the description column. Could you check it out?

Maybe it needs to be added to this list?

Thanks.

Currently URLs like https://www.idangero.us/swiper/dist/css/swiper.min.css redirect to the http version.

Title says it all.

By default Swiper exports only core version without additional modules (like Navigaion, Pagination, etc.). So you need to import and configure them too:

// core version + navigation, pagination modules:
import Swiper, { Navigaion, Pagination } from 'swiper';

I was trying to use renderSlide but wasn't successful. I return the outer HTML string but the slider doesn't work correctly, it seems to behave like in free mode. The main request would be to please add an example of how renderSlide should be implemented. Thanks.

The version number and release date are not updated on the swiperjs.com website to version 6.7.1 of June 23, 2021 and are still indicated as 6.6.2 of May 19, 2021.

Also, I see that all recent changes to .d.ts files are also not considered in the documentation.

Thanks.

One of the types for control parameter ( Swiper[] ) currently present in the .d.ts files is not reported correctly in the documentation and is therefore omitted:

https://github.com/nolimits4web/swiper/blob/8d1249c699428fd49ec2e6cc7b6ed45150a11ac8/src/types/components/controller.d.ts#L14-L18

@nolimits4web I remind you that even the type for bullets and slides of the .d.ts file is not reported correctly in the documentation nolimits4web/swiper#4694

Thanks.

I propose to do all demos in stackblitz.
Personally I like when I can play with a demo, or even save it\fork and etc.

Can be done as embed or link:

• Embed (instead of iframe)
  
• Link:
  

roundLengths now says you can use it for the following:
Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)

1. I think that the word usual should be replace by unusual.
2. roundLengths fixes a Safari bug. The text gets blurry when you don't use roundLengths in Safari because when using the translate3d property Safari needs rounded numbers. This took me hours of research about translate and Safari, but is really easily fixed by setting roundLengths to true.

I think it's better to say the following:
Set to true to round values of slides width and height if you face any problems regarding blurry text in Safari or on unusual screen resolutions

@nolimits4web I point out that the auto generated TypeScript definitions explorer https://swiperjs.com/types not work.

Thanks.

Swiper React - Ratio breakpoints

It seems that the allowTouchMove is not the correct variable anymore. This variable has changed to onlyExternal, from my understanding. Can you update the docs?

Hello.

I noticed that navigation buttons not working when slide is transitioning when transition speed is long, like 2.5 seconds.

Is there any option where I can click on "Next" button as much as I want?
Current behaviour give buggy feeling, like navigation is not working while slides are transitioning. I would rather prefere that every time I click on button, slides changes.
For example, I want to slide through slides very fast, but I can't because transition speed is 2.5s seconds, and now I have to wait for each transition to finish before sliding to next slide.

It there a browser supported list ?

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.5.1

Error on page https://swiperjs.com/api/#parameters on comment in breakpoints parameters sample : it is <= and not >=

SwiperCore.use()
Swiper.use([Controller]); > SwiperCore.use([Controller]);

Please add Angular 11 demos

Virtual Slides seems like it would be a great feature for mobile. However there's no documentation for for the different configs like renderExternal... could you add this to the example in the form of an Angular app?

Awesome to see swiper-website here!

Can I suggest to put something on docs like that? (taken from Vue.js docs)

Docs for all three say object or bool is accepted, but passing true has zero impact. Only if you specifically define selector or element, only then it starts working. So it's either the docs or plugin issue not getting defaults if true is passed.

I didn't check others, where mixed type is accepted, but I assume result would be the same.

The website says 'Inifinite'. It should be 'infinite'

Hi,

I am trying to find an example on how to load slides dynamically after fetching them from a query from my datasource.

I was thinking I would have to use virtual slides.

But your example seems to be automated and doesn't allow me to use renderExternal to fetch the data?

This is the example I am looking at: https://swiperjs.com/react#virtual-slides

What I want is to load by default X amount of slides, but when they click next, if they reach near the end, it will fetch the remote to see if there is additional data and update the slides.

I might be missing something or not understanding it correctly.

Hope you can point me out in the right direction.

Thanks!

Demo: https://stackblitz.com/edit/swiper-angular-example-xbu1vd?file=src/app/app.component.ts

The docs say that the default value for touchEventsTarget is wrapper, however, the demo demonstrates different behavior (just like it's container by default)

Swiper v6 requires that the <Swiper> components immediate descendents are either <SwiperSlide> components, react fragments, or have a slot prop.

If a component does not meet these requirements, it is put outside the slider wrapper, but this is not undocumented behaviour.

Expected Behavior

When visiting https://swiperjs.com/react the behaviour is documented

Actual Behavior

When visiting https://swiperjs.com/react the behaviour is not documented

I have MacOS, Apple mouse, chrome.
When I am clicking on link in item, it doesn't open link, but It slides next slide.
It is frustrating.

In the Events section of the API documentation, checkOverflow is mentioned, but perhaps it means watchOverflow.

• Swiper Version: 6.6.2

What You Did

Follow to react demo link for virtualized swiper.

Expected Behavior

Show a demo on how swiper virtualized works.

Actual Behavior

No slides are being displayed, and the toSlide buttons are not working correctly.

Love swiper!

I have been trying to find how to use multiple finger swipes to trigger the next or previous slide.

Intuitively I would think that this feature was built into slider i.e.

Move two fingers horizontally to trigger a slide (its become pretty expected UI for most mac users and more common place for windows users):

Is there a way to do this using swiper?

or do you need to listen for the event and then trigger next / prev slide (by this I mean I would need to write my own JS code to trigger the next / prev slide)

Ideal outcome: This is a feature in swiper that you turn on using one of the config settings (but I have just not found it yet so am asking for help).

Thank you in advance -
W