Still awaiting your solutions, dear community. It's quite important to me to get this program up and running, so I would really appreciate any advice you can provide. Thanks in advance!

I have solved the problem by adding the CSS locally and removing font faces. However, I would request that this CSS file for Swiper JS programs be approved on the Khan Academy secure CDN list for future implementations of Swiper slideshows. It is, after all, an official JsDelivr CDN, and there is no reason for it not to be approved and available.

Nicolas

Hi Nicolas (semi-active)!

Have you tried this link yet?

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css

You can select other versions here: https://cdnjs.com/libraries/Swiper

For some reason jsdelivr is not on the whitelist for CSS files---I'll check with the team about adding that.

I hope this helps!

Thank you, Lewis, for your reply. 

Yes, this new CSS link does work. However, the icons for the navigation buttons do not. I attempted to add my own custom navigation buttons in SVG format. Everything went well, but when I add the necessary classes to turn them into navigation elements, the program refuses to save. I have checked the console and found dozens of errors. Most of them were about not being able to load the built-in icons in the Swiper CSS, where they are saved as background images in b64 urls. Also, there were several errors about reassigning the swiper variable, as well as read-only assignments. As soon as I removed these classes, all these errors vanished. I am quite convinced there is no issue with my code, but rather an issue with KA's security policy not allowing those b64 urls. In fact, that is what the error messages read.  I 100% understand KA's strict security rules, as allowing anyone to link to any image on a project could lead to some problematic situations. However, when loading from a secure, mainstream and trusted CDN, one does not expect such restrictions. 

I suspect it might be difficult to tweak the security code to only allow b64 urls from CDNs, so perhaps the best option forward would be for me to work on creating entirely new nav elements and positioning them with CSS. Still, it's a painful and bloated solution that's a bit annoying when coding on KA.

I suppose this might be a part of a larger, more general problem with KA's IDE. Oh Noes shows up when I write valid code, only to find out KA's editor is not updated to modern CSS, HTML and JS. Performance is questionable, and the layout is confusing and limiting. I could never use KA's IDE to actually create my projects. I always code them somewhere else, say in VSCode or Codepen, and then paste the code into KA when I'm finished. I don't think it has to be this way. I would love to use KA more in my projects, and with a better, larger IDE, a more-customizable viewport size for my output, a more robust CSP with abundant CDN access and a better media access policy would, I think, revolutionize the CS community on Khan. For example, allowing images not just from KA and Wikipedia but also Unsplash would greatly expand our possibilities as both aspiring designers and developers. 

There are many more things I could put on my wishlist, but I don't intend to sound demanding. I understand KA is designed to be a safe learning environment for all ages, and I also think it is possible to maintain this status with a better learner experience in the CS department.

I write this with no other desire but to see CS on KA only grow into a bigger, brighter and better place to learn. KA was the place where I wrote my first line of code, and it will always have a special place in my heart, no matter how clunky and glitchy it might be :) Every now and then, I dream of a whole new, revamped version of the KA web dev section, and this is one of those times. I hope the KA dev team has started making plans for this in the future. It would be a dream come true to me and many others, I'm sure.

All the best,

Nicolas