質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.60%

html/css コピペコードが動かない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 216

kay_ventris4

score 12

やってみたいこと

ウェブページのデザインに興味があり、html/css初心者ですが少し背伸びをしてネットに公開されているスライダーデザインのコピペ用サンプルコードを使ってみたのですが、何故か動きません。半分に割れて次に行くと言ったデザインのはずなのですが、1個目で硬直して動かなくなっています。

該当コード

htmlファイルの中に、cssとjsのものを全て埋め込んでいます
(長くて申し訳ありません):

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>
    Portfolio
    </title>
    <style>
    body,
html {
  height: 100%;
  background: #110101;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .slider {
  width: 100vw;
  height: 100vw;
  z-index: 2;
}
.slideshow .slider * {
  outline: none;
}
.slideshow .slider .item {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  border: none;
}
.slideshow .slider .item .text {
  display: none;
}
.slideshow .slider .item img {
  min-width: 101%;
  min-height: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.slideshow .slick-dots {
  position: fixed;
  z-index: 100;
  width: 40px;
  height: auto;
  bottom: auto;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: auto;
  color: #fff;
  display: block;
}
.slideshow .slick-dots li {
  display: block;
  width: 100%;
  height: auto;
}
.slideshow .slick-dots li button {
  position: relative;
  width: 20px;
  height: 15px;
  text-align: center;
}
.slideshow .slick-dots li button:before {
  content: '';
  background: #fff;
  color: #fff;
  height: 2px;
  width: 20px;
  border-radius: 0;
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  opacity: 0.6;
}
.slideshow .slick-dots li.slick-active button:before {
  width: 40px;
  opacity: 1;
}
.slideshow.slideshow-right {
  left: 0;
  z-index: 1;
  width: 50vw;
  pointer-events: none;
}
.slideshow.slideshow-right .slider {
  left: 0;
  position: absolute;
}

.slideshow-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 80px;
  width: 100vw;
  text-align: center;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 20px;
  line-height: 0.8;
}
@media (max-width: 767px) {
  .slideshow-text {
    font-size: 40px;
  }
}

.the-most {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 200px;
  padding: 10px;
}
.the-most img {
  max-width: 100%;
}
    </style>
    </head>









<body>
<script type="text/javascript">
var $slider = $('.slideshow .slider'),
  maxItems = $('.item', $slider).length,
  dragging = false,
  tracking,
  rightTracking;

$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {
  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}

$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
  vertical: true,
  verticalSwiping: true,
  arrows: false,
  infinite: true,
  dots: true,
  speed: 1000,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', -1);
    $('.slideshow-text').slick('slickGoTo', maxItems);
  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
    $('.slideshow-text').slick('slickGoTo', -1);
  } else {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
    $('.slideshow-text').slick('slickGoTo', nextSlide);
  }
}).on("mousewheel", function(event) {
  event.preventDefault();
  if (event.deltaX > 0 || event.deltaY < 0) {
    $(this).slick('slickNext');
  } else if (event.deltaX < 0 || event.deltaY > 0) {
    $(this).slick('slickPrev');
  };
}).on('mousedown touchstart', function(){
  dragging = true;
  tracking = $('.slick-track', $slider).css('transform');
  tracking = parseInt(tracking.split(',')[5]);
  rightTracking = $('.slideshow-right .slick-track').css('transform');
  rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function(){
  if (dragging) {
    newTracking = $('.slideshow-left .slick-track').css('transform');
    newTracking = parseInt(newTracking.split(',')[5]);
    diffTracking = newTracking - tracking;
    $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
  }
}).on('mouseleave touchend mouseup', function(){
  dragging = false;
});

$('.slideshow-right .slider').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 950,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
  initialSlide: maxItems - 1
});
$('.slideshow-text').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 900,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});
console.log("JavaScriptを実行しています");
</script>




<div class="split-slideshow">
  <div class="slideshow">
    <div class="slider">
      <div class="item">
        <img src="a.jpg" />
      </div>
      <div class="item">
        <img src="b.jpg" />
      </div>
      <div class="item">
        <img src="c.jpg" />
      </div>
      <div class="item">
        <img src="d.jpg" />
      </div>
    </div>
  </div>
  <div class="slideshow-text">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
  </div>
</div>
</html>

やってみたこと

cssのバージョンが違うのではないかと思ったのですが、htmlファイルに全て纏めてcssファイルも入れてしまっているせいか、バージョンが確認できませんでした。調べても自分の知りたい情報に行き着けなかったので、お力添えいただける箇所がございましたら宜しくお願い申し上げます。大変に雑な形での質問をお許しください。

環境

Model: MacBook Pro 13
Version: macOS 10.15.7

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

var $slider = $('.slideshow .slider'),

これはjQueryの「セレクタ」を指定して要素を得る記法です。
Selectors | jQuery API Documentation

jQueryはJavaScriptのライブラリです。
ですので、そのライブラリ本体を読み込んでないと使えません。
ブラウザ開発ツールのコンソールを確認すると$ is unidefinedのようなエラーが出ているはずです。
jQuery本体を読み込んでください。
(調べてください)

もちろんjQuery本体だけで済むとは限りませんが、そこはエラーが出ているならエラーを解消しながら進めていってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/15 23:40

    jquery.comから、Download the compressed, production jQuery 3.5.1というのを押し、ダウンロードしたjsファイルを件のhtmlファイルと同じディレクトリに置いて、<script src="jquery-3.5.1.min.js"></script>を<head>タグ内に入れたのですが、特に変化はありませんでした。そこが問題ではないのでしょうかね…

    キャンセル

  • 2020/10/16 07:01

    回答にはjQueryのことだけを言及してないので確認、試行してください

    キャンセル

  • 2020/10/16 08:14

    エラー確認してますか?
    ブラウザのデベロッパーツール→コンソール
    jQuery設置するだけでもまだエラーは出ています。
    jQueryのプラグインでも利用してるのではないでしょうか。
    ただ、それでもまだ動かないでしょうね。
    ここは基本的なことなのですが、HTML内のコードは特に何も指定がなければ上から順番に読み込まれます。
    もしJavaScriptでHTMLの要素を操作しているとして、対象のHTML要素が読み込まれていないときにその処理が来ていたら?
    「読み込まれていない要素」なので処理はできません。
    そのあたりも含めて精査してください。コードは書いたとおりにしか動かないので、内容をきちんと理解せずにコピペだけするのは非常に効率が悪いです。

    キャンセル

checkベストアンサー

+1

こんにちは。

↓これですね?

中央でスライススライド!
コピペで出来るスゴすぎるスライドショーアニメーション 【 HTML/CSS 】 - デシノン

CODEPENのフレームの下の方に「Resources」というボタンがあると思いますが、これを押すと読み込まれている外部リソースの一覧が出ます。
これらをすべて読み込んで適切に配置する必要があります。

もしそれでも配置の仕方がわからないようでしたら、件のページからそのCODEPENに飛び、プレビューフレーム上で右クリック→「このフレーム」→「このフレームを新しいタブで開く」(Firefoxの場合)とすると単一ページとして開くので、これのソースを表示(Ctrl+u)してみると参考になるでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/16 14:34

    なるほど!外部ソースが入力されていなかったのですね。
    今回は遊びの感覚でうまくコピペコードを動かしてみたかっただけだったのでよかったです。ありがとうとざいました。

    キャンセル

  • 2020/10/16 14:39

    なんか、もやるわー

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る