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

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

ただいまの
回答率

87.48%

jqueryのスライドショーの画像が大きくなりません

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 618

score 16

jquerymでのスライドショーにて画像サイズが画面の幅いっぱいにならず、原因が分からないため質問します。
3枚の画像がフェードイン、フェードアウトする形のアニメーションなのですが、
CSSにてwidht100%に指定したところ、1枚の画像は画面の幅いっぱいになるのですが
2枚目、3枚目に表示される画像は元画像の大きさのままで余白ができてしまいます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--font-awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <!--css-->
    <link rel="stylesheet" href="./css/style.css">
    <!--js-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <title>Document</title>
</head>
<body>
     <div class="main-image">
        <ul id="slide_wrapp">
            <li class="slide_item">
                <img src="img/photo-1499002238440-d264edd596ec.jpeg" alt="">
            </li>
            <li class="slide_item">
                <img src="img/photo-1569199545475-e2f7bb242e5f.jpeg" alt="">
            </li>
            <li class="slide_item">
                <img src="img/photo-1499002238440-d264edd596ec.jpeg" alt="">
            </li>
        </ul>
    </div>


    <!--js-->
    <script src="js/script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: hsl(60, 100%, 100%);
    font-family: "kozL" "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    overflow-x: hidden;
}



article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    margin: 0;
    padding: 0;
}







// スライドプラスズーム
#slide_wrapp{
  position: relative;
  overflow: hidden;



  .slide_item{

    opacity: 0;
    transform: scale(1);
    transition: opacity 2s linear, transform 7.5s linear;  //秒数に注意
    position: relative;
    z-index: 1;

    .rem{
        width: 100%;
    }

    &:not(:first-child){
      position: absolute;
      top: 0;
      left : 0;
    }

    &.show_{
      opacity: 1;
    }
    &.zoom_{
      transform: scale(1.1);
    }
    img{
      display: block; //下に余白ができないよう
      width: 100%;
    }
  }
}



// スライドプラスズーム
// スライドショー

window.addEventListener('load', function () {
    sliderStart();
});

function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
    const FadeTime = 2000;                                     //フェードインの時間
    const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
    let actNum = 0;                                            //現在アクティブな番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド

    // スライドの1枚目をフェードイン
    slideItem[0].classList.add('show_', 'zoom_');

    // 処理を繰り返す
    setInterval(() => {
        if (actNum < totalNum) {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[++actNum];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        } else {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[actNum = 0];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        };
    }, IntarvalTime);

}

// スライドショー

2枚目、3枚目の画像にクラス名を指定したりして見ましたが、改善は見られませんでした。
宜しくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/11/23 20:26

    提示されているCSSはSCSSやSASSでは?

    キャンセル

  • mimuratakasi

    2019/11/23 21:29

    ご指摘ありがとうございます。修正致しました。

    キャンセル

回答 1

checkベストアンサー

0

absoluteにすると高さ幅を指定し無い場合、内包要素のサイズになるため、サイズが予期しないものになっていたのでは。

    &:not(:first-child){
      position: absolute;
      top: 0;
      left : 0;
      right: 0; /* ADD */
      bottom: 0; /* ADD */
    }

動くサンプル:https://jsfiddle.net/dy83pjz1/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/11/23 23:49

    ありがとうございます!無事動作しました。
    勉強になりました。

    キャンセル

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

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

関連した質問

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