-1
A
答えて
0
その検査まで:https://codepen.io/kalaiselvan/pen/POKyKw
$('#exampleModal').on('show.bs.modal', function(e) {
$(window).resize();
$(window).resize();
});
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
.demo {
width: 450px;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
\t
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
\t
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="demo">
<ul id="lightSlider">
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
+0
これはサムネイルがありません –
+0
私はキャプションを検査して写真に送ったのと全く同じデザインが欲しいです。 –
+0
私は私の回答を更新しました@Abdul Rehman –
関連する問題
- 1. は私のブラウザ
- 2. のNode.js:私のブラウザ
- 3. 画像私は、ブラウザ内の画像やショーを取得するためにルーメンを使用
- 4. ショーのみ、私は(一部)このテンプレートを持つビュー
- 5. <:私は、ブラウザからの私のWCFのRESTメソッドを実行すると、ブラウザ
- 6. 角度2アプリは私のブラウザで私のコンソールでは、私のディレクトリ
- 7. ショーは、私がSOAPUIに統合テストを作成しようSoapIU
- 8. bxsliderスライダーの画像は、私は、ブラウザ
- 9. は私のウェブ・ブラウザ・アプリケーションは、私が作成した
- 10. WebExtension:どのように私は私のブラウザのアクション
- 11. 私のブラウザがデフォルトのリスト
- 12. 私のアニメーションGIFは、すべてのブラウザ
- 13. 私は、ブラウザのウィンドウで/ズームアウトすると私のhtmlインデックスページが
- 14. 私はいくつかのブラウザ
- 15. Safariは、私が試した他のブラウザ
- 16. Railsの5エビPDFショー合計テーブル値私の見解で
- 17. バッチファイルdoesntのショーのパラメータは、私は次のバッチファイルを使用しています
- 18. 新しいアクションがここに私のルートがあるショー
- 19. ショーと私はアンドロイドでは、このようなアニメーションを作成したいアンドロイド
- 20. のEclipse EGitと私のgitリポジトリには、コマンド・ライン・ショー異なるステータスのGit
- 21. ボディコンテンツ繰り返しモーダルコンテンツ
- 22. ブートストラップMYSQL PHP - モーダルコンテンツを送信
- 23. 私はウェブサイトのsite.com/index.php/"non-existent-dirに私のブラウザをポイント」ここにはCSS
- 24. ブラウザは、私は私のソースHTMLで次のしているHTMLタグ
- 25. テーブルビューセル・ショーの画像は、私がTableViewCellで画像を表示したい問題
- 26. 私のブラウザの私の.ASPページを表示する
- 27. とき; 80(HTTP)、私はブラウザ*をクリックしたときに私は、この画面
- 28. ショーのUpdateProgressデータセットは
- 29. サンプルのAWS EC2コンテナサービスの雲の形成テンプレートは、EC2コンテナを登録doest以外
- 30. Html.fromHtmlショーはライン
コードを入力してください – Hkachhia
@Abdul Rehmanの問題は、メディアのクエリがある可能性がありますので、画像スライダが原因である可能性があります。検査画面は縮小され、スライダーが表示されます。 –
メディアクエリは適用されていません –