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

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

ただいまの
回答率

90.48%

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5247questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

矢印を押したら、次にスライドし、そのままアニメーションを続くようにしたい(CSS)

受付中

回答 0

投稿 編集

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

矢印を押したら、次にスライドし、そのままアニメーションを続くようにしたい

現在、自動スライダーをCSSで作成しているのですが、
+で矢印を押したら、次にスライドし、そのままアニメーション
が続くCSSによるスライダーを作成したいと思っております。
参考にしているサイトは以下になります。
http://css.programming.jp/?p=557
http://css.programming.jp/?p=1051

該当のソースコード

<!-- スライド表示枠 -->
<div id="stage">
  <!-- スライド切換えボタン用ラジオボタン -->
  <input type="radio" id="r1" name="gal">
  <input type="radio" id="r2" name="gal">
  <input type="radio" id="r3" name="gal">
  <input type="radio" id="r4" name="gal">
  <input type="radio" id="r5" name="gal">
  <!-- 送りボタン用ラジオボタン -->
  <input type="radio" id="back1" name="gal"><input type="radio" id="next1" name="gal">
  <input type="radio" id="back2" name="gal"><input type="radio" id="next2" name="gal">
  <input type="radio" id="back3" name="gal"><input type="radio" id="next3" name="gal">
  <input type="radio" id="back4" name="gal"><input type="radio" id="next4" name="gal">
  <input type="radio" id="back5" name="gal"><input type="radio" id="next5" name="gal">
  <!-- 現スライド標示ボタンのラジオボタンとの関連付け -->
  <label for="r1" id="lb1" class="circ"></label>
  <label for="r2" id="lb2" class="circ"></label>
  <label for="r3" id="lb3" class="circ"></label>
  <label for="r4" id="lb4" class="circ"></label>
  <label for="r5" id="lb5" class="circ"></label>

  <!-- スライド群 -->
  <div id="photos">
        <!-- スライド1 -->
      <div id="photo1" class="pic">
        <!-- スライド写真と現スライド標示ボタン -->
          <img src="https://placehold.jp/640x480.png">
        <label id="lb1_2b" class="btn2"></label>
        <!-- 送りボタンの表示とラジオボタンとの関連付け -->
        <label for="back1"><span class="pb"></span></label>
        <label for="next1"><span class="nb"></span></label>
      </div>      
      <div id="photo2" class="pic">
          <img src="https://placehold.jp/640x480.png">
        <label id="lb2_2b" class="btn2"></label>
        <label for="back2"><span class="pb"></span></label>
        <label for="next2"><span class="nb"></span></label>
      </div>
      <div id="photo3" class="pic">
          <img src="https://placehold.jp/640x480.png">
        <label id="lb3_2b" class="btn2"></label>
        <label for="back3"><span class="pb"></span></label>
        <label for="next3"><span class="nb"></span></label>
      </div>
      <div id="photo4" class="pic">
          <img src="https://placehold.jp/640x480.png">
        <label id="lb4_2b" class="btn2"></label>
        <label for="back4"><span class="pb"></span></label>
        <label for="next4"><span class="nb"></span></label>
      </div>
      <div id="photo5" class="pic">
          <img src="https://placehold.jp/640x480.png">
        <label id="lb5_2b" class="btn2"></label>
        <label for="back5"><span class="pb"></span></label>
        <label for="next5"><span class="nb"></span></label>
      </div>
  </div>
 <!--使用画像の縦/横を2/1にした割合=padding幅-->

</div>
#stage {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background:#666;
    overflow: hidden;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
    display: none;
}

/*全表示スライドのコンテナー*/
#photos {
    position: relative;
  width:100%;
    /*pointer-events: none;*/
    animation:flowSlides 40s infinite;
}

/* 個々のスライド・現スライド標示ボタン */
.pic {
    position: absolute;
  top:0;
  left:100%;
  width:100%;
  -moz-animation: imgtrans 40s infinite;
    -webkit-animation: imgtrans 40s infinite;
    animation: imgtrans 40s infinite;
}

#photo1 {
  position:relative;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#photo2 {
    -moz-animation-delay: 8s;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
#photo3 {
    -moz-animation-delay: 16s;
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
#photo4 {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#photo5 {
    -moz-animation-delay: 32s;
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
}


/* 初期スライドショー */

@keyframes imgtrans {
 0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}


/* 表示切換えボタンと表示位置 */
.circ, .btn2{
     position: absolute;
    bottom: 0px;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #ccc;
    cursor: pointer;
}
#lb1,#lb1_2b{ left: 27%;}
#lb2,#lb2_2b{ left: 37%;}
#lb3,#lb3_2b{ left: 47%;}
#lb4,#lb4_2b{ left: 57%;}
#lb5,#lb5_2b{ left: 67%;}

 .btn2{
    background-color: #56b329;
}
/* 左右送りボタン */
.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;/*z-index:200;pointer-events:auto;*/}
.pb { left:0%; }
.nb { left:96%; }
.pb:hover, .nb:hover { color:orange; cursor:pointer; }
/* stageが初期サイズ以下のなったときのサイズ */
@media screen and (max-width: 640px) { .pb, .nb { font-size:18px; } }

*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
/* 左右送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 40s infinite; }
#next3:checked ~ #photos { animation:flowSlides4 40s infinite; }
#next4:checked ~ #photos { animation:flowSlides5 40s infinite; }
#next5:checked ~ #photos { animation:flowSlides1 40s infinite; }




/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
     0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@keyframes flowSlides2 {
     0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@keyframes flowSlides3 {
     0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@keyframes flowSlides4 {
     0% { left:100%; }
 5% { left:0%; }
 20% { left:0%; }
 25% { left:-100%; }
 100% { left:-100%; }
}
@keyframes flowSlides5 {
    0% { left:0px;}
    2% { left:0px;}
    18% { left:0px;}
    20% { left:0px;}
    20.01% { left:-640px;}
    22% { left:-640px;}
    38% { left:-640px;}
    40% { left:-640px;}
    40.01% { left:-1280px;}
    42% { left:-1280px;}
    58% { left:-1280px;}
    60% { left:-1280px;}
    60.01% { left:-1920px;}
    62% { left:-1920px;}
    78% { left:-1920px;}
    80% { left:-1920px;}
    80.01% { left:-2560px;}
    82% { left:-2560px;}
    98% { left:-2560px;}
    100% { left:-2560px;}
}

試したこと

参考にしている2つのパターンを組み合わせ、
それぞれの矢印用のキーフレームに
@keyframes imgtrans と同じ
CSSを当ててみましたが、
うまくいきませんでした。
実機
https://codepen.io/satoru1993/pen/NVmYYx

補足情報(FW/ツールのバージョンなど)

jsのライブラリ等を使えば楽なのは
わかっておりますが、
何とかCSSで作成したいと思っております。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • mts10806

    2019/06/12 22:08

    コードブロックは任意数設置できますのでCSSもマークダウンcode機能を利用してください。

    キャンセル

  • satoru225Simple

    2019/06/12 22:17

    大変失礼いたしました。
    コードブロックで囲んだつもりが、うまく
    囲めてなかったようです。

    修正完了しました。

    何卒宜しくお願い致します。

    キャンセル

  • azuapricot

    2019/06/13 09:13

    CSSだけで作成したいのはなぜですか?
    どう考えてもJSのほうが楽なのに。JSがわからないからでしょーか

    キャンセル

  • satoru225Simple

    2019/06/13 09:28

    js 等の知識がまだ低いのはありますが、それでも、Swiper.jsと言ったライブラリがあるのは知っているので、こちらを使った方が楽なのは承知の上です。
    ただ、css アニメーションでも出来ることであれば、これを使って少しでもサイトが軽くなればと考えております。

    キャンセル

まだ回答がついていません

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

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5247questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • トップ
  • CSSに関する質問
  • 矢印を押したら、次にスライドし、そのままアニメーションを続くようにしたい(CSS)