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

実行したいこと

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

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

補足情報

リンク内容

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

試したこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="style.css">
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7<script src="slide.js"></script>
8</head>
9
10<body>
11<div class="title">
12    <div class="title-slider">
13        <div class="title-arrow title-arrow-left arrow" title-do="true" data-direction="left">
14            &lt;
15        </div>
16        <div class="title-center">
17            <div class="title-img" id="img-roop" number="0">
18                <div class="mv mv4" data-number="-2">
19                </div>
20                <div class="mv mv1" data-number="-1">
21                </div>
22                <div class="mv mv2" data-number="0" style="opacity: 1.0;">
23                </div>
24                <div class="mv mv3" data-number="1">
25                </div>
26                <div class="mv mv4" data-number="2">
27                </div>
28                <div class="mv mv1" data-number="3">
29                </div>
30                <div class="mv mv2" data-number="4">
31                </div>
32                <div class="mv mv3" data-number="5">
33                </div>
34            </div>
35        </div>
36        <div class="title-arrow title-arrow-right arrow" title-do="true" data-direction="right">
37            &gt;
38        </div>
39            <ul id="title-tab">
40                <li style="opacity: 1.0;">
41                    <button class="title-button">●</button>
42                </li>
43                <li>
44                    <button class="title-button">●</button>
45                </li>
46                <li>
47                    <button class="title-button">●</button>
48                </li>
49                <li>
50                    <button class="title-button">●</button>
51                </li>
52            </ul>
53    </div>
54</div>
55</body>
56
57</html>

css
1@charset "UTF-8";
2
3
4li {
5    padding: 0;
6}
7
8ul {
9    list-style: none;
10    padding: 0;
11}
12
13
14body {
15    width: 100%;
16    font-size: 14px;
17    margin: 0;
18    text-align: center;
19    min-width: 1300px;
20    color: black;
21}
22
23section {
24    margin-top: 50px;
25}
26
27.contet-wrappper {
28    margin: 0 auto;
29    max-width: 100%;
30    width: 1100px;
31}
32
33
34/**title**/
35
36.title {
37    margin-top: 20px;
38    width:100%;
39    height: 100%;
40    overflow-x: hidden;
41    font-size: 18px;
42    padding-bottom: 80px;
43    background-size: 65px;
44}
45
46.title-slider {
47    width: 100%;
48    height: 100%;
49    margin-bottom: 40px;
50    display: block;
51    position: relative;
52}
53
54.title-arrow {
55    z-index: 5;
56    width: 40px;
57    height: 50px;
58    font-size: 80px;
59    color: red;
60    position: absolute;
61    top: 230px;
62    cursor: pointer;
63}
64.title-arrow-left {
65    left: 0%;
66}
67.title-arrow-right {
68    left: 95%;
69}
70
71.title-center {
72    width: 100%;
73}
74
75.title-img {
76    left: calc(-2400px + (100% - 1200px)/2);
77    display: flex;
78    position: relative;
79    width: 10000px;
80    transform: translateX(0px);
81    transition: 1.7s ease;
82}
83
84.img-roop {
85    transition: 1ms;
86}
87
88.mv {
89    width: 1200px;
90    height: 500px;
91    position: relative;
92    display: block;
93    opacity: 0.33;
94    
95}
96
97
98/***button***/
99
100#title-tab {
101    margin: 0 auto;
102    position: relative;
103    bottom: 40px;
104    display: flex;
105    height: 40px;
106    width: 160px;
107    padding: 0 25px;
108    background-color: white;
109    border-radius: 40px 40px 0 0;
110    z-index: 1;
111    border-bottom: 1px solid rgba(0, 0, 0, 0.267);
112}
113
114#title-tab li {
115    opacity: 0.5;
116}
117
118.title-button {
119    font-size: 35px;
120    padding: 0 10px;
121    border: none;
122    color: rgba(8, 202, 41, 0.925);
123    background-color: rgba(255, 255, 255, 0);
124}
125
126.section-slide {
127    width: 1050px;
128    margin-left: auto;
129    margin-right: auto;
130    margin-top: 54px;
131}
132.section-slide .range {
133    position: relative;
134    width: 5000px;
135    display: flex;
136    height: auto;
137}
138
139.slide-box {
140    position: relative;
141    width: 1050px;
142    height: auto;
143    display: flex;
144    justify-content: space-between;
145    margin-right: 40px;
146    transform: translateX(0);
147    transition: 1.4s ease;
148}
149
150.slide-box-hidden {
151    opacity: 0.5;
152}
153.slide-box-hidden a {
154    pointer-events: none;
155}
156
157
158.section-arrow {
159    color: red;
160    font-size: 80px;
161    z-index: 3;
162    position: absolute;
163    top: 25%;
164}
165.section-arrow-right {
166    left: 1100px;
167}
168.section-arrow-left {
169    left: -120px;
170    display: none;
171}
172
173.section-tab {
174    width: 100%;
175    margin-top: 25px;
176}
177
178.section-tab ul {
179    display: flex;
180    justify-content: space-between;
181    margin-left: auto;
182    margin-right: auto;
183    width: 70px;
184    font-size: 16px;
185    color: rgba(8, 202, 41, 0.925);
186}
187
188.section-opa {
189    opacity: 0.5;
190}
191
192.box-tag {
193    display: flex;
194    justify-content: space-between;
195    align-items: flex-end;
196    position: relative;
197    width: auto;
198    height: 60px;
199    margin-bottom: 5px;
200}
201
202.tag-classification {
203    border: 1.0px solid rgb(93, 197, 116);
204    border-radius: 4.0px;
205    color: rgb(93, 197, 116);
206    padding: 2.5px;
207    font-size: 16px;
208    height: auto;
209}
210
211.mv1 {
212    background-color: red;
213}
214
215.mv2 {
216    background-color: yellow;
217}
218
219.mv3 {
220    background-color: blue;
221}
222
223.mv4 {
224    background-color: black;
225}

js(jquery)
1jQuery(function($){
2
3    //title slide action        
4    {
5        var n=0;
6        var x=0;
7        var i=0;
8        var ti=$(".title-img");
9        //スライド関数title
10        var arrow=function(direction){
11            $(".title-arrow").attr("title-do","false");
12            i=parseInt(ti.attr("number"))
13            n=i + direction;
14            x=-n*1200;
15            opacity();
16            button();
17            ti.css({transform : "translateX(" + x + "px)"}).attr("number",n);
18        }
19
20        function opacity(){
21            var appear=n+3;
22            var hidden=i+3;
23            $(".mv:nth-child(" + hidden +")").removeAttr("style");
24            $(".mv:nth-child(" + appear +")").css("opacity",1.0);
25        }
26        function button(){
27            var appear_b=n+1;
28            if(appear_b>4){
29                appear_b=-4;
30            }
31            else if(appear_b<1){
32                appear_b=+4;
33            }
34            $("#title-tab li").removeAttr("style");
35            $("#title-tab li:nth-child(" + appear_b +")").css("opacity",1.0);
36        }
37
38        //矢印クリック
39        $(".arrow").on("click",function(){
40            var data_d=$(this).data("direction");
41            clearInterval(timeid);
42            if ($(this).attr("title-do")=="true") {   
43                if(data_d=="left"){
44                    arrow(-1);
45                }else if(data_d=="right"){
46                    arrow(1);
47                }
48            }
49        });
50
51        //settimer
52        var slide_timer=function() {
53            if($(".arrow").attr("title-do")=="true"){
54                arrow(1);
55            }
56        }
57        var timeid=setInterval(slide_timer,5000);
58
59            //translated end処理
60            ti.on("transitionend",function(){
61                if(n>=4){
62                    roop(1);
63                }
64                else if(n<=-1){
65                    roop(-1);
66                }
67                $(".title-arrow").attr("title-do","true");
68            });
69            //  roop
70            var roop=function(back){
71                ti.addClass("img-roop");
72                var rhidden=n+3;
73                n=n - 4*back;
74                x=-n*1200;
75                opacity(0);
76                $(".img-roop").css({transform : "translateX(" + x + "px)"}).attr("number",n);
77                setTimeout(function(){ti.removeClass("img-roop");
78                    $(".mv:nth-child(" + rhidden +")").removeAttr("style");},0);
79            }
80    }
81
82});