Q&A
FlexSlider2を利用してサムネイルを表示して、サムネイルをクリックするとメイン画像部分が切り替わるという表現を設定したいのですが、
うまくいきません。
初めて設定するのでよくわかっていない部分が多く、教えて頂きたいです。
ソースが長いので省略・要約します。
<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Bootstrap Template</title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/styles.css" rel="stylesheet"> <script language="javascript" src="/js/jquery-2.1.4.min.js" type="text/javascript"></script> <script src="/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/css/flexslider.css" /> <script src="/js/jquery.flexslider.js"></script> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-10"> <div class="row"> <div class="col-md-4"> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); </script> </div> </div> </div> </div>（中略 ）
（サムネイル設定部分）
<div class="row flexslider"> <div class="col-md-8 slides"> <h3>詳細画像</h3> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <p data-thumb="/image_market/201.jpg"> <img src="/image_market/201.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/202.jpg"> <img src="/image_market/202.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/203.jpg"> <img src="/image_market/203.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/204.jpg"> <img src="/image_market/204.jpg" class="img-responsive" /> </p> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <p data-thumb="/image_market/205.jpg"> <img src="/image_market/205.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/206.jpg"> <img src="/image_market/206.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/207.jpg"> <img src="/image_market/207.jpg" class="img-responsive" /> </p> </div> <div class="col-md-3"> <p data-thumb="/image_market/208.jpg"> <img src="/image_market/208.jpg" class="img-responsive" /> </p> </div> </div> </div> </div> </div>
あなたの回答
tips
プレビュー
