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

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

ただいまの
回答率

87.78%

タブ切り替えの中に、無限スワイプを加えたものを作りたい

受付中

回答 1

投稿

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

score 1

実行したいこと

タブ切り替えの中に、無限スワイプを加えたものを作りたい

上記形式のHTML・CSS・JavaScriptを教えてください。

現在、ECサイト(カートシステム:おちゃのこネット)を作成しており、この様な形式をサイトに反映させたいです。

補足情報

リンク内容

上記ピーチジョンのサイト真ん中にある様な、タブ切り替えと無限スワイプのものを作りたいです。

試したこと

ピーチジョンのサイトを検証モードで見ましたが、HTMLは見つけらましたが、JavaScriptと CSSは見つけれませんでした。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

プラグインを使わない前提で書きます(プラグインを使うならばググればすぐ出てきます)

とりあえずコピペすれば動くと思います(レスポンシブ対応はしていないのでpcで見ることをお勧めします)

一部変数や名前などおかしなところもありますし、プログラムとしても汎用性は全くありませんが、今回の質問の無限スライドの理解には影響ないので気にしないでください。(以前自分で使ったものを抜粋して一部変更したコードなので)

本題のほうですが、
slideできる画面幅の大きな場所を用意しときます。今回はwidth:10000px;にしてあります。
その中にflexでcontentを横並びにします。はみ出る部分は隠れるようにします。
それをtranslateなどで移動させます。
上記が簡単な一連の流れです
jsの中では、矢印を押したらイベントが発火します。時間でも発火するようにsettimeしています。
一周する時はtranslateを戻しています。translateを戻すときはtransition: 1ms;で目で見て変な動きにならないようにしています。

短い説明になりましたが、後はコードを読めばスライドの流れはわかるかと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="slide.js"></script>
</head>

<body>
<div class="title">
    <div class="title-slider">
        <div class="title-arrow title-arrow-left arrow" title-do="true" data-direction="left">
            &lt;
        </div>
        <div class="title-center">
            <div class="title-img" id="img-roop" number="0">
                <div class="mv mv4" data-number="-2">
                </div>
                <div class="mv mv1" data-number="-1">
                </div>
                <div class="mv mv2" data-number="0" style="opacity: 1.0;">
                </div>
                <div class="mv mv3" data-number="1">
                </div>
                <div class="mv mv4" data-number="2">
                </div>
                <div class="mv mv1" data-number="3">
                </div>
                <div class="mv mv2" data-number="4">
                </div>
                <div class="mv mv3" data-number="5">
                </div>
            </div>
        </div>
        <div class="title-arrow title-arrow-right arrow" title-do="true" data-direction="right">
            &gt;
        </div>
            <ul id="title-tab">
                <li style="opacity: 1.0;">
                    <button class="title-button"></button>
                </li>
                <li>
                    <button class="title-button"></button>
                </li>
                <li>
                    <button class="title-button"></button>
                </li>
                <li>
                    <button class="title-button"></button>
                </li>
            </ul>
    </div>
</div>
</body>

</html>
@charset "UTF-8";


li {
    padding: 0;
}

ul {
    list-style: none;
    padding: 0;
}


body {
    width: 100%;
    font-size: 14px;
    margin: 0;
    text-align: center;
    min-width: 1300px;
    color: black;
}

section {
    margin-top: 50px;
}

.contet-wrappper {
    margin: 0 auto;
    max-width: 100%;
    width: 1100px;
}


/**title**/

.title {
    margin-top: 20px;
    width:100%;
    height: 100%;
    overflow-x: hidden;
    font-size: 18px;
    padding-bottom: 80px;
    background-size: 65px;
}

.title-slider {
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
    display: block;
    position: relative;
}

.title-arrow {
    z-index: 5;
    width: 40px;
    height: 50px;
    font-size: 80px;
    color: red;
    position: absolute;
    top: 230px;
    cursor: pointer;
}
.title-arrow-left {
    left: 0%;
}
.title-arrow-right {
    left: 95%;
}

.title-center {
    width: 100%;
}

.title-img {
    left: calc(-2400px + (100% - 1200px)/2);
    display: flex;
    position: relative;
    width: 10000px;
    transform: translateX(0px);
    transition: 1.7s ease;
}

.img-roop {
    transition: 1ms;
}

.mv {
    width: 1200px;
    height: 500px;
    position: relative;
    display: block;
    opacity: 0.33;

}


/***button***/

#title-tab {
    margin: 0 auto;
    position: relative;
    bottom: 40px;
    display: flex;
    height: 40px;
    width: 160px;
    padding: 0 25px;
    background-color: white;
    border-radius: 40px 40px 0 0;
    z-index: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.267);
}

#title-tab li {
    opacity: 0.5;
}

.title-button {
    font-size: 35px;
    padding: 0 10px;
    border: none;
    color: rgba(8, 202, 41, 0.925);
    background-color: rgba(255, 255, 255, 0);
}

.section-slide {
    width: 1050px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 54px;
}
.section-slide .range {
    position: relative;
    width: 5000px;
    display: flex;
    height: auto;
}

.slide-box {
    position: relative;
    width: 1050px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-right: 40px;
    transform: translateX(0);
    transition: 1.4s ease;
}

.slide-box-hidden {
    opacity: 0.5;
}
.slide-box-hidden a {
    pointer-events: none;
}


.section-arrow {
    color: red;
    font-size: 80px;
    z-index: 3;
    position: absolute;
    top: 25%;
}
.section-arrow-right {
    left: 1100px;
}
.section-arrow-left {
    left: -120px;
    display: none;
}

.section-tab {
    width: 100%;
    margin-top: 25px;
}

.section-tab ul {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: 70px;
    font-size: 16px;
    color: rgba(8, 202, 41, 0.925);
}

.section-opa {
    opacity: 0.5;
}

.box-tag {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    width: auto;
    height: 60px;
    margin-bottom: 5px;
}

.tag-classification {
    border: 1.0px solid rgb(93, 197, 116);
    border-radius: 4.0px;
    color: rgb(93, 197, 116);
    padding: 2.5px;
    font-size: 16px;
    height: auto;
}

.mv1 {
    background-color: red;
}

.mv2 {
    background-color: yellow;
}

.mv3 {
    background-color: blue;
}

.mv4 {
    background-color: black;
}
jQuery(function($){

    //title slide action        
    {
        var n=0;
        var x=0;
        var i=0;
        var ti=$(".title-img");
        //スライド関数title
        var arrow=function(direction){
            $(".title-arrow").attr("title-do","false");
            i=parseInt(ti.attr("number"))
            n=i + direction;
            x=-n*1200;
            opacity();
            button();
            ti.css({transform : "translateX(" + x + "px)"}).attr("number",n);
        }

        function opacity(){
            var appear=n+3;
            var hidden=i+3;
            $(".mv:nth-child(" + hidden +")").removeAttr("style");
            $(".mv:nth-child(" + appear +")").css("opacity",1.0);
        }
        function button(){
            var appear_b=n+1;
            if(appear_b>4){
                appear_b=-4;
            }
            else if(appear_b<1){
                appear_b=+4;
            }
            $("#title-tab li").removeAttr("style");
            $("#title-tab li:nth-child(" + appear_b +")").css("opacity",1.0);
        }

        //矢印クリック
        $(".arrow").on("click",function(){
            var data_d=$(this).data("direction");
            clearInterval(timeid);
            if ($(this).attr("title-do")=="true") {   
                if(data_d=="left"){
                    arrow(-1);
                }else if(data_d=="right"){
                    arrow(1);
                }
            }
        });

        //settimer
        var slide_timer=function() {
            if($(".arrow").attr("title-do")=="true"){
                arrow(1);
            }
        }
        var timeid=setInterval(slide_timer,5000);

            //translated end処理
            ti.on("transitionend",function(){
                if(n>=4){
                    roop(1);
                }
                else if(n<=-1){
                    roop(-1);
                }
                $(".title-arrow").attr("title-do","true");
            });
            //  roop
            var roop=function(back){
                ti.addClass("img-roop");
                var rhidden=n+3;
                n=n - 4*back;
                x=-n*1200;
                opacity(0);
                $(".img-roop").css({transform : "translateX(" + x + "px)"}).attr("number",n);
                setTimeout(function(){ti.removeClass("img-roop");
                    $(".mv:nth-child(" + rhidden +")").removeAttr("style");},0);
            }
    }

});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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