nolimits4web / swiper-website Goto Github PK
View Code? Open in Web Editor NEWSwiper website
Home Page: https://swiperjs.com
Swiper website
Home Page: https://swiperjs.com
Currently URLs like https://www.idangero.us/swiper/dist/css/swiper.min.css redirect to the http version.
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.
swiper-website/src/jade/get-started/index.jade
Lines 30 to 31 in 551ed11
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.
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
Hello,
http://joxi.ru/krDgaDjFEeWaZA
problem here
http://joxi.ru/82QjJ5OcjX6nkA
v.4.4.5
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
The Zoom example has a typo in the slide class.
swiper-slide
swiper-side
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.
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.
SwiperCore.use()
Swiper.use([Controller]);
> SwiperCore.use([Controller]);
@nolimits4web I point out that the auto generated TypeScript definitions explorer https://swiperjs.com/types not work.
Thanks.
Please add Angular 11 demos
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).
EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.
EXPLAIN WHAT IS TO BE EXPECTED, HERE.
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.
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:
@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.
It there a browser supported list ?
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 :)
❤️
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?
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:
This is a (multiple allowed):
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 can use https://picsum.photos/ instead of using the same photos over & over :)
The website says 'Inifinite'. It should be 'infinite'
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.
Small typo in mousewheel.eventsTarged, should be eventsTarget?
You'll need to find and replace all instances.
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!
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
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?
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
Try to edit demo in Stackblitz.
Swiper working properly with CSS implemented.
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.
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?
swiper-website/build/build-api.js
Lines 92 to 107 in 9aa5989
Thanks.
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';
Follow to react demo link for virtualized swiper.
Show a demo on how swiper virtualized works.
No slides are being displayed, and the toSlide buttons are not working correctly.
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.
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)
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.
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.
In the Events section of the API documentation, checkOverflow
is mentioned, but perhaps it means watchOverflow
.
Title says it all.
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)
usual
should be replace by unusual
.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
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 >=
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.
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.
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.
When visiting https://swiperjs.com/react the behaviour is documented
When visiting https://swiperjs.com/react the behaviour is not documented
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.