More than 5 years have passed since last update.

bxスライダーの初期設定

jQuery

Last updated at 2019-11-11Posted at 2019-11-11

必要なスクリプトとCSSは以下のサイトからDL
https://bxslider.com/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> bxslider </title>
<!-- DLしたcssファイルのパス -->
<link rel="stylesheet" href="assets/bxslider/dist/jquery.bxslider.css">
<!-- グーグルからライブラリを取得 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- DLしたjsファイルのパス -->
<script src="assets/bxslider/dist/jquery.bxslider.min.js"></script>
</head>

<body>

<!-- スライダーの要素  -->
<div class="slider">
  <div>SLIDE.NO1</div>
  <div>SLIDE.NO2</div>
  <div>SLIDE.NO3</div>
  <div>SLIDE.NO4</div>
  <div>SLIDE.NO5</div>
  <div>SLIDE.NO6</div>
</div>

<!-- スライダーのスクリプト始動 -->
<script>
  $(document).ready(function(){
    $('.slider').bxSlider({
     auto: true,
     pause: 2000,
    speed: 500,
    //一度に表示させる最大枚数
    maxSlides: 1,
    //タッチスワイプ許可設定
    touchEnabled: true,
    //タッチスワイプしたとみなす最低限の移動距離
    swipeThreshold: 10,
    //'full'はスライダーの数を黒点で、'short'はa/nで表示
    pagerType: 'full',
    // 画像の高さを自動調整
    adaptiveHeight: true,
    //その他のオプションは※URL参照
	    
</script>
</body>
</html>

※bxSliderオプション一覧

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up