表題の通りCSS3 HTML5だけを仕様して、SPでアクセスした場合のみ
表示されるスライダーを実装しており、ひとまずスライダーの
大枠は完成したのですが初期表示位置を一番左側の画像の位置から変えられず困っています。
こちらの件詳しい方がいらっしゃいましたらアイデアをお貸し頂けないでしょうか。
CSS3のみで実装できれば嬉しいですが、難しい場合js jqueryを利用しても大丈夫です。
ただ、運用コスト実装コストの面からプラグインの利用はしない方針です。
よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="carousel"> 11 <ul class="carousel-area"> 12 <li class="carousel-list"><img class="carousel-img" src="img/img-shop01.jpeg" alt=""></li> 13 <li class="carousel-list"><img class="carousel-img" src="img/img-shop02.jpeg" alt=""></li> 14 <li class="carousel-list"><img class="carousel-img" src="img/img-shop03.jpeg" alt=""></li> 15 <li class="carousel-list"><img class="carousel-img" src="img/img-shop04.jpeg" alt=""></li> 16 </ul> 17 </div> 18</body> 19</html> 20 21<style> 22 23 @media screen and (max-width: 600px) { 24 * { 25 margin: 0; 26 padding: 0; 27 box-sizing: border-box; 28 list-style: none; 29 } 30 .carousel { 31 width: 600px; 32 height: calc(600px * 0.5625); 33 margin: 0 auto; 34 } 35 .carousel-area { 36 width: 3150px; 37 height: 100%; 38 display: flex; 39 } 40 .carousel-list { 41 width: 600px; 42 height: calc(600px * 0.5625); 43 margin-right: 30px; 44 } 45 .carousel-img { 46 width: 100%; 47 height: 100%; 48 } 49 .carousel { 50 width: 300px; 51 height: calc(300px * 0.5625); 52 margin: 0; 53 } 54 .carousel-area { 55 width: 1000px; 56 } 57 .carousel-list { 58 width: 300px; 59 height: calc(300px * 0.5625); 60 margin-right: 0; 61 } 62 } 63</style>
ご提示のコードを試してみましたが、画像が横並びになるだけで、カルーセルとして機能しませんでした。
おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。
問題再現の手順をもう少し詳しく書いていただけますか?