bxSlider, bxslider, bx-sliderを使用したシンプルなスライダー

0_readme.md

仕様

• jquery plugin bxSliderを使用（http://bxslider.com/）
• htmlの命名ルールは最新のものを使用（http://qiita.com/nekoneko-wanwan/items/10827552ad705a2d8d52）
• スライドのcallbackでclassを付け替えることで、中でさらに細かなアニメーションを実現
• レスポンシブは未対応

前提条件

• js有効無効でスタイルを変更している。modernizrでhtml or bodyに .js がついている必要がある
• jquery.bxslider.cssは無くても動作するが、別途コントロールや他スタイルを実装する場合は、読み込むかスタイルを作成する
• 装飾に関するスタイルは依存していないので、別途自前のcssで調整

1_html.html

<div class="hero-visual">
  <div class="hero-visual__inner">
    <ul class="hero-visual__slider" id="js-hero-slider">
      <li class="hero-block js-hero-slider__block">
        <a href="#">
          <span class="hero-block__part is-xxx">テキストテキストテキスト</span>
          <span class="hero-block__bg"><img src="http://dummyimage.com/1280x380/ccc/fff.jpg&text=image1" alt=""></span>
        </a>
      </li>
      <li class="hero-block js-hero-slider__block">
        <a href="#">
          <span class="hero-block__part is-xxx">テキストテキストテキスト</span>
          <span class="hero-block__bg"><img src="http://dummyimage.com/1280x380/eee/fff.jpg&text=image2" alt=""></span>
        </a>
      </li>
    </ul><!-- /.hero-visual__slider -->
    <div class="hero-pager" id="js-hero-pager">
      <a data-slide-index="0" class="hero-pager__item" href=""></a><!-- 
   --><a data-slide-index="1" class="hero-pager__item" href=""></a>
    </div><!-- /.hero-pager -->
  </div><!-- /.hero-visual__inner -->
</div><!-- /.hero-visual -->

2_scss.scss

/* hero-visual
   - jquery.bxSlider.jsを使用
---------------------------------*/
.hero-visual {
	margin-top: 20px;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 395px;  // slide-pager分の高さ(15px)を確保
	.no-js & {
		height: 380px;  // js無効時にはpagerが不要なため高さを削除
	}
}
.hero-visual__inner {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1280px;
	margin-left: -640px;
}
.hero-visual__slider {
	margin: 0;
	padding: 0;
	list-style: none;
	// pager分を除いたスライダー自体の高さを指定
	overflow: hidden;
	height: 380px;
}
// hero-visualとは直接の依存関係はないため、blockを分けている
.hero-block {
	$that: &;
	a {
		display: block;
		@include my_hover_opacity;
	}
	// modifier [jsによるaddClass]
	&.has-shown {
		#{$that}__part {
			opacity: 1;
			transform: translateX(0px);
		}
	}
}
.hero-block__part {
	position: absolute;
	transition: all .3s;
	// デフォルトでは非表示+位置をずらしておく
	.js & {
		opacity: 0;
		transform: translateX(-50px);
	}
	// modifier
	&.is-xxx {
		left: 200px;
	}
}
.hero-pager {
	text-align: center;
	line-height: 0;
}
.hero-pager__item {
	background-color: $g_gray-normal;
	display: inline-block;
	margin: 10px 5px 0;
	height: 5px;
	width: 40px;
	&.active { // class名はplugin依存のため変更できない
		background-color: $g_main-color;
	}
}

3_js.js

/**
 * トップページのhero-visualで使用するスライダー
 * - jquery.bxslider.js を使用
 */
var slider = function() {
  var $slider      = $('#js-hero-slider');
  var $sliderLists = $slider.find('.js-hero-slider__block');
  var PAGER_ID      = '#js-hero-pager';
  var ACTIVE_CLASS = 'has-shown';

  /**
   * classを付け替える関数
   * 一旦すべてのliのclassを削除し、該当するliに改めてclassを付与
   * @param {object} $el: $sliderListsに含まれるliをjqueryObjectとして渡す
   */
  var switchClass = function($el) {
    /* Delete */
    $sliderLists.removeClass(ACTIVE_CLASS);
    /* Add */
    $el.addClass(ACTIVE_CLASS);
  };

  /**
   * runPlugin
   */
  var runPlugin = function() {
    var option = {
      /* sliderが読み込まれたら */
      onSliderLoad: function(currentIndex) {
        /* load後すぐに実行するとcssのtransitionと発動タイミングがずれることがあるためdelay */
        setTimeout(function() {
          var $el = $($sliderLists[currentIndex]);
          switchClass($el);
        }, 100);
      },
      /* sliderが完了したら */
      onSlideAfter: function($el, oldIndex, newIndex) {
        switchClass($el);
        sl.startAuto(); // クリックしてもautoを止めない
      },
      responsive: false,
      controls: false,
      pause: 7000,
      speed: 800,
      auto: true,
      pagerCustom: PAGER_ID
    };
    var sl = $slider.bxSlider(option);
  };

  return runPlugin();
};


$(function() {
  $(window).load(function() {
    slider();
  });
});

4_css.css

/* hero-visual
   - jquery.bxSlider.jsを使用
---------------------------------*/
.hero-visual {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 395px;
	margin-top: 20px;
}
.no-js .hero-visual {
	height: 380px;
}

.hero-visual__inner {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1280px;
	margin-left: -640px;
}

.hero-visual__slider {
	overflow: hidden;
	height: 380px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-block a {
	display: block;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.hero-block a:hover {
	opacity: 0.7;
}
.hero-block.has-shown .hero-block__part {
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	opacity: 1;
}

.hero-block__part {
	position: absolute;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.js .hero-block__part {
	-webkit-transform: translateX(-50px);
	-ms-transform: translateX(-50px);
	transform: translateX(-50px);
	opacity: 0;
}
.hero-block__part.is-xxx {
	left: 200px;
}

.hero-pager {
	line-height: 0;
	text-align: center;
}

.hero-pager__item {
	display: inline-block;
	width: 40px;
	height: 5px;
	margin: 10px 5px 0;
	background-color: #cccccc;
}
.hero-pager__item.active {
	background-color: #006cb8;
}