codepenのコピペ方法について。JSのソースコードは<script>で囲ってHTMLの</body>の上に付けるんですか？

codepenのslick+fancyboxをコピペ参照して動的サイトを作りたい。

リスト参考にしたサイト

fancybox v3.4 + Slick carousel
codepen.io/DmiE/pen/rNaOZOL

問題点

リンク先のHTMLコード、javascriptコードを張り付けても動作しない。
そこで、設定マークから.cssと.jsと他codepenのソースコードを適当に拾ってタイトル通りに<script>で囲ってHTMLの</body>の上に付けても反応しません。。。。。
明らかにやり方が違うようです。
皆さんはどうやって動かしてるんでしょうか？
ご教授お願い致します。

html
1<h2>fancybox v3.4 + Slick carousel</h2>
2
3<p>
4  This demo shows how to solve a problem with cloned links
5</p>
6
7<hr class="my-5" />
8
9<div class="main-slider" style="max-width:900px;">
10  <a href="https://via.placeholder.com/1200x800?text=1">
11		<img src="https://via.placeholder.com/300x200?text=1" />
12	</a>
13	<a href="https://via.placeholder.com/1200x800?text=2">
14		<img src="https://via.placeholder.com/300x200?text=2" />
15	</a>
16	<a href="https://via.placeholder.com/1200x800?text=3">
17		<img src="https://via.placeholder.com/300x200?text=3" />
18	</a>
19  <a href="https://via.placeholder.com/1200x800?text=4">
20		<img src="https://via.placeholder.com/300x200?text=4" />
21	</a>
22</div>
23
24<div class="small-slider" style="background: #ddd;max-width:300px;margin-top:50px;">
25	<a href="https://via.placeholder.com/1200x800?text=1">
26		<img src="https://via.placeholder.com/300x200?text=1" />
27	</a>
28	<a href="https://via.placeholder.com/1200x800?text=2">
29		<img src="https://via.placeholder.com/300x200?text=2" />
30	</a>
31	<a href="https://via.placeholder.com/1200x800?text=3">
32		<img src="https://via.placeholder.com/300x200?text=3" />
33	</a>
34	<a href="https://via.placeholder.com/1200x800?text=4">
35		<img src="https://via.placeholder.com/300x200?text=4" />
36	</a>
37</div>
38

javascript
1// Open thumbs view straight away for demo purposes
2$.fancybox.defaults.thumbs.autoStart = true;
3
4// ============================
5// Init 1st slider and fancybox
6// ============================
7
8// fancybox
9$().fancybox({
10  selector : '.main-slider .slick-slide:not(.slick-cloned)',
11  backFocus : true
12});
13
14// Slick
15$(".main-slider").slick({
16  slidesToShow   : 3,
17  infinite : true,
18  dots     : false,
19  arrows   : false
20});
21
22// ============================
23// Init 2nd slider and fancybox
24// ============================
25
26// fancybox
27$().fancybox({
28  selector : '.small-slider .slick-slide:not(.slick-cloned)',
29  backFocus : false,
30  afterShow : function( instance, current ) {
31    current.opts.$orig.closest(".slick-initialized").slick('slickGoTo', parseInt(current.index), true);
32  }
33});
34
35// Slick
36// =====
37
38$(".small-slider").slick({
39  slidesToShow   : 1,
40  infinite : true,
41  dots     : false,
42  arrows   : false
43});
44
45// ============================================
46// Attach custom click event on cloned elements, 
47// trigger click event on corresponding link
48// ============================================
49$(document).on('click', '.slick-cloned', function(e) {
50  var $slides = $(this)
51  .parent()
52  .children('.slick-slide:not(.slick-cloned)');
53
54  $slides
55    .eq( ( $(this).attr("data-slick-index") || 0) % $slides.length )
56    .trigger("click.fb-start", { $trigger: $(this) });
57
58  return false;
59});

javascriptのソースコード

0. CSSのソースコード

itagagaki

2021/12/28 14:14

Consoleに何か出ていないか見てみてください。Consoleを開くボタンは左下にあります。

tigerssinjo

2021/12/28 14:33

Consoleの中には何もありませんでした。ご回答ありがとうございます。

itagagaki

2021/12/28 14:54

codepen.io/DmiE/pen/rNaOZOL こっちは動いていますよね？質問のコードをcodepenにコピペして、上記の外部スクリプト/スタイルシートのURLを同じように入れたら動きましたよ？

行動規範の内容に同意します

回答1件

ベストアンサー

正しいやり方なのか、わかりませんが
1)
<head>タグ内の<link>に
下記に含まれるcssをローカルに保存したもの
https://codepen.io/fancyapps/pen/jpgVba
https://codepen.io/fancyapps/pen/Kxdwjj
と
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

<script src="">に
https://codepen.io/fancyapps/pen/jpgVba
に含まれるjsをローカル保存したファイル
と
<script src="https://codepen.io/fancyapps/pen/jpgVba:javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

codepen.io/DmiE/pen/rNaOZOLのjavascriptをローカルに保存したもの(例えばscript.js)を
<head>タグ内で<script src="script.js" defer></script>と記述したり

</body>の直前に記述したところ
再現が可能でした。

他のcodepenのjsやcssを埋め込む事ができるんですねぇ。。。知りませんでした。

最終的なコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css -->
    <link rel="stylesheet" href="Kxdwjj.css">
    <link rel="stylesheet" href="jpgVba.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <!-- js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="jpgVba.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h2>fancybox v3.4 + Slick carousel</h2>
    <p> This demo shows how to solve a problem with cloned links </p>
    <hr class="my-5" />
    <div class="main-slider" style="max-width:900px;">
      <a href="https://via.placeholder.com/1200x800?text=1">
        <img src="https://via.placeholder.com/300x200?text=1" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=2">
        <img src="https://via.placeholder.com/300x200?text=2" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=3">
        <img src="https://via.placeholder.com/300x200?text=3" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=4">
        <img src="https://via.placeholder.com/300x200?text=4" />
      </a>
    </div>
    <div class="small-slider" style="background: #ddd;max-width:300px;margin-top:50px;">
      <a href="https://via.placeholder.com/1200x800?text=1">
        <img src="https://via.placeholder.com/300x200?text=1" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=2">
        <img src="https://via.placeholder.com/300x200?text=2" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=3">
        <img src="https://via.placeholder.com/300x200?text=3" />
      </a>
      <a href="https://via.placeholder.com/1200x800?text=4">
        <img src="https://via.placeholder.com/300x200?text=4" />
      </a>
    </div>
  </body>
</html>

投稿2021/12/29 11:10

編集2021/12/30 01:16