Comments (9)
The primary problem is not even stackblitz, it's that any website who used the cdn is now broken. Hope most people hosted their own files
from swiper-website.
Same problem, but i fixed with the new url that you can found
here : https://swiperjs.com/get-started/
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
from swiper-website.
Should be closed. Stackblitz demos are up to date
from swiper-website.
Same problem
from swiper-website.
same problem :'(
from swiper-website.
Same problem
from swiper-website.
Same problem
from swiper-website.
Hi @lastnoob .
English is not my first language so I am not sure if I was clear above.
I linked the issue to Stackblitz, because the problem can be easily fixed by the users just pointing the CDN to the right version, so it is not a code or src issue, and the best example that I could find for the issue caused by the new file structure was the Stackblitz.
The actual problem is that the new version (v6) do not follow the same file structure and naming as v5 and earlier.
It is true that most websites using the CDN might be broken, but only IF they are not specifying the version on the url path.
When you use the CDN https://unpkg.com/swiper/
you are requesting the most recent version, but you can specify the version adding @[version number]
to the directory name, like: https://unpkg.com/swiper@5/
.
The problem here is if you request the version 5, the CSS
and JS
files are located inside their respective folder, so you will find them in (assuming you are using the minified files):
/js/swiper.min.js
and/css/swiper.min.css
So the final url would be something like:
https://unpkg.com/swiper@5/js/swiper.min.js
andhttps://unpkg.com/swiper@5/css/swiper.min.css
But if you are willing to use the newest version you can refer to the documentation (that is up to date with the changes):
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Notice that the files are now located on the root
folder (there is no /js/
ro /css/
) and the name changed from swiper
to swiper-bundle
.
I would recommend to always specify the version when you use CDN, so then you avoid unexpected behaviours when a new version is released.
from swiper-website.
Was going to open an issue with this same problem but i see it's already here so i'm just adding my comment here. For me this is a minor issue since i've been using this swiper for like 4 years now (and still have to check the docs sometimes) but for someone who's approaching for the first time it could be a bit of an issue when they try the code on stackblitz and it doesn't work
from swiper-website.
Related Issues (20)
- Mistake in code sample related to cssMode option
- .swiper-slide style has a wrong property
- Jest-test does not work for Swiper
- Make carousel behave in same way as centeredSlides but pinned to the left hand side? Possible? HOT 1
- React lazy demo is broken
- Documentation for parameter update might be misleading HOT 1
- Please provide helpful guidance on use of Swiper with SolidJs and Typescript.
- Please add Docs for usage with Angular HOT 2
- Keyboard Control Demo
- Unclear what "virtual slides" does
- Element Flip demo slides are skewed HOT 1
- Guidance needed on which parameters can be changed in `breakpoints`
- How is the live navigation menu on the Swiper documentation implemented? HOT 1
- 9version after "slidesPerView: "auto",spaceBetween: 30,loop: true,centeredSlides: true," error
- Documentation for `fadeEffect` should be removed HOT 2
- Update Documentation
- Is the class of the swiper-container web component exported somewhere?
- Add Swiper options to data attribute - renderBullet not working HOT 2
- Support of `rem` instead of `px` required
- SwiperSlide no longer support isDuplicate, or is it? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swiper-website.