├── README.md
├── img
    ├── 001.jpg
    ├── 001t.jpg
    ├── 002.jpg
    ├── 002t.jpg
    ├── 003.jpg
    ├── 003t.jpg
    ├── 004.jpg
    ├── 004t.jpg
    ├── 005.jpg
    └── 005t.jpg
├── styles.css
├── package.json
├── .gitignore
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | #bedtime-story
2 | 


--------------------------------------------------------------------------------
/img/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/001.jpg


--------------------------------------------------------------------------------
/img/001t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/001t.jpg


--------------------------------------------------------------------------------
/img/002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/002.jpg


--------------------------------------------------------------------------------
/img/002t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/002t.jpg


--------------------------------------------------------------------------------
/img/003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/003.jpg


--------------------------------------------------------------------------------
/img/003t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/003t.jpg


--------------------------------------------------------------------------------
/img/004.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/004.jpg


--------------------------------------------------------------------------------
/img/004t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/004t.jpg


--------------------------------------------------------------------------------
/img/005.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/005.jpg


--------------------------------------------------------------------------------
/img/005t.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timathon/bedtime-story/main/img/005t.jpg


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* .splide__slide img {
2 | 	width : 100%;
3 | 	height: auto;
4 | } */
5 | 
6 | #btnFS {
7 |   position: absolute;
8 |   z-index: 1000;
9 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bedtime-story",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@e.coding.net:lynx0421/guesshow/bedtime-story.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "@splidejs/splide": "^2.4.21"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # Snowpack dependency directory (https://snowpack.dev/)
 45 | web_modules/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | .parcel-cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | out
 82 | 
 83 | # Nuxt.js build / generate output
 84 | .nuxt
 85 | dist
 86 | 
 87 | # Gatsby files
 88 | .cache/
 89 | # Comment in the public line in if your project uses Gatsby and not Next.js
 90 | # https://nextjs.org/blog/next-9-1#public-directory-support
 91 | # public
 92 | 
 93 | # vuepress build output
 94 | .vuepress/dist
 95 | 
 96 | # Serverless directories
 97 | .serverless/
 98 | 
 99 | # FuseBox cache
100 | .fusebox/
101 | 
102 | # DynamoDB Local files
103 | .dynamodb/
104 | 
105 | # TernJS port file
106 | .tern-port
107 | 
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 | 
111 | # yarn v2
112 | 
113 | .yarn/cache
114 | .yarn/unplugged
115 | .yarn/build-state.yml
116 | .pnp.*
117 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Bedtime Story</title>
  9 |   <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
 10 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
 11 |   <link rel="stylesheet" href="styles.css">
 12 | </head>
 13 | 
 14 | <body>
 15 | 
 16 |   <button id="btnFS">全屏</button>
 17 | 
 18 |   <div id="primary-slider" class="splide">
 19 |     <div class="splide__track">
 20 |       <ul class="splide__list">
 21 |         <li class="splide__slide">
 22 |           <img src="img/001.jpg">
 23 |         </li>
 24 |         <li class="splide__slide">
 25 |           <img src="img/002.jpg">
 26 |         </li>
 27 |         <li class="splide__slide">
 28 |           <img src="img/003.jpg">
 29 |         </li>
 30 |         <li class="splide__slide">
 31 |           <img src="img/004.jpg">
 32 |         </li>
 33 |         <li class="splide__slide">
 34 |           <img src="img/005.jpg">
 35 |         </li>
 36 |       </ul>
 37 |     </div>
 38 |   </div>
 39 | 
 40 | 
 41 |   <div id="secondary-slider" class="splide">
 42 |     <div class="splide__track">
 43 |       <ul class="splide__list">
 44 |         <li class="splide__slide">
 45 |           <img src="img/001t.jpg">
 46 |         </li>
 47 |         <li class="splide__slide">
 48 |           <img src="img/002t.jpg">
 49 |         </li>
 50 |         <li class="splide__slide">
 51 |           <img src="img/003t.jpg">
 52 |         </li>
 53 |         <li class="splide__slide">
 54 |           <img src="img/004t.jpg">
 55 |         </li>
 56 |         <li class="splide__slide">
 57 |           <img src="img/005t.jpg">
 58 |         </li>
 59 |       </ul>
 60 |     </div>
 61 |   </div>
 62 | 
 63 | </body>
 64 | 
 65 | <script>
 66 |   document.addEventListener('DOMContentLoaded', function () {
 67 |     var secondarySlider = new Splide('#secondary-slider', {
 68 |       fixedWidth: 100,
 69 |       height: 60,
 70 |       gap: 10,
 71 |       cover: true,
 72 |       isNavigation: true,
 73 |       focus: 'center',
 74 |       pagination: false,
 75 |       breakpoints: {
 76 |         '600': {
 77 |           fixedWidth: 66,
 78 |           height: 40,
 79 |         }
 80 |       },
 81 |     }).mount();
 82 |     var primarySlider = new Splide('#primary-slider', {
 83 |       type: 'fade',
 84 |       heightRatio: 0.5,
 85 |       pagination: false,
 86 |       arrows: false,
 87 |       cover: true,
 88 |     });
 89 | 
 90 |     primarySlider.sync(secondarySlider).mount();
 91 | 
 92 |     var doc = document.documentElement;
 93 | 
 94 | 
 95 | 
 96 |     btnFS = document.getElementById('btnFS');
 97 |     btnFS.onclick = () => {
 98 |       if (document.fullscreenElement) {
 99 |         document.exitFullscreen()
100 |       } else {
101 |         doc.requestFullscreen()
102 |       }
103 |     }
104 | 
105 |   });
106 | </script>
107 | 
108 | 
109 | </html>


--------------------------------------------------------------------------------