ここから本文です

サイトについて。html等を学習中の初心者です。 javascriptを用いて、以下の画像...

アバター

ID非公開さん

2019/4/1709:54:08

サイトについて。html等を学習中の初心者です。
javascriptを用いて、以下の画像のようなスライドシを作りたいのですができません。

コピペサイトから、そのままコピペでやっているのですが、どこか間違っているのでしょうか?
スライドの要素が縦に並んでいて、スライドできない状態です。
~~~~~~~~~~~~~~html~~~~~~~~~~~~~~~~~~~~~
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<meta name="description" contents="ページです。">
<link rel="stylesheet" href="aaa.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<header>
</header>
<main>
<div class="swiper-container">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
</div>
</main>

<footer></footer>
<script src="aaa.js"></script>
</body>
~~~~~~~~~~~~~~~~~~~~~~html~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~css~~~~~~~~~~~~~~~~~~
外部ファイル(ファイル名:aaa.css)

/* 全体のスタイル */
.swiper-wrapper {
width: 100%;
height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
line-height: 250px;
}
/* 4の倍数+1枚目のスライドのスタイル(1枚目、5枚目…) */
.swiper-slide:nth-child(4n+1) {
background-color: #EECB27;
}
/* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */
.swiper-slide:nth-child(4n+2) {
background-color: #E13239;
}
/* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */
.swiper-slide:nth-child(4n+3) {
background-color: #1F1762;
}
/* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */
.swiper-slide:nth-child(4n+4) {
background-color: #BEDAE5;
}
~~~~~~~~~~~~~~~~~~css~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~js~~~~~~~~~~~~~~~~~~~~~
外部ファイル(ファイル名:aaa.js)

var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
~~~~~~~~~~~~~~~~js~~~~~~~~~~~~~~~~~~

div class,div&amp;gt,stylesheet&amp;quot,nth-child,footer&amp;gt,script&amp;gt,Swiper.js

閲覧数:
44
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

leg********さん

2019/4/1711:34:50

Swiperは、jQueryが無くても動きます。

ご質問者様のソースに手を加えて
動作確認済みのサンプルを試作してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" contents="Swiper DEMOページです。">
<title>Swiper DEMO</title>

<!-- link rel="stylesheet" href="aaa.css" -->

<style>
/* 全体のスタイル aaa.css */
.swiper-wrapper {
width: 100%;
height: 250px;
position: relative;
}
/* 全スライド共通スタイル */
.swiper-slide {
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
line-height: 250px;
}
/* 4の倍数+1枚目のスライドのスタイル(1枚目、5枚目…) */
.swiper-slide:nth-child(4n+1) {
background-color: #EECB27;
}
/* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */
.swiper-slide:nth-child(4n+2) {
background-color: #E13239;
}
/* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */
.swiper-slide:nth-child(4n+3) {
background-color: #1F1762;
}
/* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */
.swiper-slide:nth-child(4n+4) {
background-color: #BEDAE5;
}
</style>

<!-- 追加部分 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.j..."></script>

</head>

<body>
<header>
</header>

<main>
<div class="swiper-container">

<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>

<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- ページネーション -->
<div class="swiper-pagination"></div>
</div>
</main>

<footer></footer>

<!-- script src="aaa.js"></script -->

<script>
//修正後 aaa.js
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true
});

</script>
</body>
</html>

Q. どこか間違っているのでしょうか?
スライドの要素が縦に並んでいて、スライドできない状態です。

A. 大きな間違い(バグ)は、
必要なファイルが読み込まれていませんでした。

  • アバター

    質問者

    ID非公開さん

    2019/4/1814:42:30

    回答ありがとうございます。
    無事各スライドが重なり、ボタンも設置できたのですが、
    ボタンを押してもスライドのアクションが起きないのですが、
    教えていただけないでしょうか。
    よろしくお願いいたします。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜1件/1件中

yay********さん

2019/4/1710:13:36

スワイプするためのJQueryライブラリ
Swiper.js
読み込んでない

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる