Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<div style="text-align:center;">
<div class="bx-top">
<ul class="bxslider">
<li><a href="URLリンク入力"><img src="画像リンク" title="タイトル入力"/></a></li>
<li><a href="URLリンク入力"><img src="画像リンク" title="タイトル入力"></a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
$(function() {
$('.bx-top').fadeIn('slow');
});
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'horizontal',
moveSlides: 1, /*一度に動かすスライドの数*/
slideMargin: 40, /*空白調節*/
infiniteLoop: true, /*途切れなくループさせるか*/
slideWidth: 400, /*スライドの幅*/
minSlides: 1, /*1つの画面に表示させるスライドの最大数*/
maxSlides: 1,/*1つの画面に表示させるスライドの最小数*/
speed: 800, /*スライダーの移動スピード*/
pager: false, /*ページャーを表示させるかどうか*/
captions: true, /*スライダーの画像にタイトルを被せる場合はTRUE*/
auto: true
});
});
</script>
<script type="text/javascript">
/* ### ゆっくり表示 ### */
$(function() {
$('.bxslider').fadeIn('slow');
});
</script>
<style type="text/css">
/* ### 最初は非表示 ### */
.bx-top{
display:none;
}
/* ### 各種調整 ### */
.bx-wrapper {
position: relative;
margin-bottom:0px !important;
padding: 0;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
</style></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.