以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。
今回のスライドショーの主なポイント
ブラウザー幅一杯にスライドを表示させる
左右の画像は半透明のブラーがかかっている
レスポンシブサイトなので、フリックにも対応
レスポンシブ対応サイト制作wideslider版
black-flag.net
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>既存サイトのトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/wideslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="js/wideslider.js"></script> </head> <body> <header> <div class="inner"> <h1>既存サイトのタイトル</h1> </div> </header> <div class="wideslider"> <ul> <li><a href="#1"><img src="img/mainvis_233.jpg" alt="" /></a></li> <li><a href="#2"><img src="img/mainvis_250.jpg" alt="" /></a></li> <li><a href="#3"><img src="img/mainvis_252.png" alt="" /></a></li> <li><a href="#4"><img src="img/mainvis_248.jpg" alt="" /></a></li> </ul> </div><!--/.wideslider--> <ul class="gallery"> <li class="size2x2"><a href="#"></a></li> <li class="size2x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size2x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1"><a href="#"></a></li> <li class="size1x1 sp-on"><a href="#"></a></li> </ul> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,p,ul,li { margin:0; padding:0; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; } img { vertical-align: bottom; } /*PCレイアウト*/ /*ヘッダー部分*/ header { padding:16px 0; box-sizing:border-box; } h1 { width:103px; background:url(../img/head_logo_001.jpg) no-repeat center/contain; text-indent:100%; white-space:nowrap; overflow:hidden; } /*ギャラリー部分*/ .gallery { max-width:960px; padding:1%; box-sizing:border-box; margin:0 auto; overflow:hidden; } .gallery li { width:18%; height:0; padding-bottom:18%; float:left; margin:1%; border:1px solid #DCDCDC; box-sizing:border-box; } .gallery li.size2x2 { width:37.9%; height:0; padding-bottom:37.9%; } .gallery li.size2x1 { width:38%; height:0; padding-bottom:18%; } .gallery li a { display:block; width:100%; height:0; padding-bottom:100%; } .gallery li.size2x1 a { padding-bottom:49%; } .gallery li:nth-child(1) a { background:url(../img/image_928.jpg) no-repeat center/cover; } .gallery li:nth-child(2) a { background:url(../img/image_925.jpg) no-repeat center/cover; } .gallery li:nth-child(3) a { background:url(../img/image_930.jpg) no-repeat center/cover; } .gallery li:nth-child(4) a { background:url(../img/image_838.jpg) no-repeat center/cover; } .gallery li:nth-child(5) a { background:url(../img/image_728.png) no-repeat center/cover; } .gallery li:nth-child(6) a { background:url(../img/image_821.jpg) no-repeat center/cover; } .gallery li:nth-child(7) a { background:url(../img/image_894.jpg) no-repeat center/cover; } .gallery li:nth-child(8) a { background:url(../img/image_669.png) no-repeat center/cover; } .gallery li:nth-child(9) a { background:url(../img/image_927.jpg) no-repeat center/cover; } .gallery li:nth-child(10) a { background:url(../img/image_824.jpg) no-repeat center/cover; } .gallery li:nth-child(11) a { background:url(../img/image_912.png) no-repeat center/cover; } /*共有パーツ*/ .inner { width:960px; margin:0 auto; overflow:hidden; } .sp-on { display:none; } @media screen and (max-width:640px) { .gallery li { width:48%; height:0; padding-bottom:48%; } .gallery li.size2x2 { width:98%; height:0; padding-bottom:48%; } .gallery li.size2x1 { width:98%; height:0; padding-bottom:48%; } .gallery li.size2x2 a { width:98%; height:0; padding-bottom:48%; } .gallery li:nth-child(1) a { background:url(../img/image_929.jpg) no-repeat center/cover; } .sp-on { display:block; } }
