Here’s how I modified sample code from Swiper, a modern responsive mobile-compatible JavaScript slider library, to work as a standalone file.

nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

Operating Environment

• swiper v4.5.0

Swiper Sample Code

git clone swiper

git clone https://github.com/nolimits4web/swiper.git
cd swiper
git checkout refs/tags/v4.5.0

Using CDN

I modified the files in the swiper demos directory to load .css .js files from CDN so they work standalone.

Referring to Use Swiper from CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

Below is the diff showing how I modified demos/010-default.html to use CDN:

diff --git a/demos/010-default.html b/demos/010-default.html
index be28c6a..e023d9a 100644
--- a/demos/010-default.html
+++ b/demos/010-default.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Swiper demo</title>
   <!-- Link Swiper's CSS -->
-  <link rel="stylesheet" href="../dist/css/swiper.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
 
   <!-- Demo styles -->
   <style>
@@ -63,7 +63,7 @@
   </div>
 
   <!-- Swiper JS -->
-  <script src="../dist/js/swiper.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
 
   <!-- Initialize Swiper -->
   <script>

Customizing Swiper sample code

Finally, customize sample code like demos/010-default.html and share just the 010-default.html file with clients asking “Is this the kind of image you had in mind?” to have them review the complete source code.

That’s all from the Gemba.