WEB-MemoryStar Blog

WEB・参考サイトとか思ったことを書きつづる予定。HTML5・CSS3・JavaSqript・jQuery・PHPを実践したものとかを参考書や検索には出てこない、バカでもできるくらいのオープンソースとかも書けたらいいなぁと思ってます。

コンテンツスライダー

JavaScript デザイン

ぜひメモっておきたいコンテンツスライダー記述

カルーセル（コンテンツスライダー）

カルーセル（コンテンツスライダー）

  • コンテンツスライダ-
  • 画像は適宜、準備すること

 

f:id:web-mind:20131112094433j:image

 

f:id:web-mind:20131112102218p:image

 

f:id:web-mind:20131112102219p:image



<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>カルーセル（コンテンツスライダー）サンプル</title>
<linkrel="stylesheet"href="./css/style.css">
</head>
<body>
<divid="container">
<header>
<h1>カルーセルサンプル</h1>
</header>
<divclass="slider-area">
<divclass="scrollable"id="scrollable">
<divclass="items">
<divclass="item">
<pclass="photo">
<imgsrc="img/photo01.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント1</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo02.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント2</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo03.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント3</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo04.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント4</p>
</div>
</div>
</div>
<aclass="prev browse left"></a>
<aclass="next browse right"></a>
<divclass="navi"></div>
</div>
<footer><p><small>with: jQuery Tools</small></p></footer>
</div>

<!-- jQueryの読み込み -->
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<!-- jQueryToolsの読み込み -->
<scriptsrc="./js/jquery.tools.min.js"></script>

<script>
$(function(){
  $("#scrollable").scrollable().navigator();
});
</script>

</body>
</html>

 

《jquery.tools.min.js》

/*!
 * jQuery Tools v1.2.7 - The missing UI library for the Web
 * 
 * scrollable/scrollable.js
 * scrollable/scrollable.navigator.js
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/
 * 
 */
(function(a){a.tools=a.tools||{version:"v1.2.7"},a.tools.scrollable={conf:{activeClass:"active",circular:!1,clonedClass:"cloned",disabledClass:"disabled",easing:"swing",initialIndex:0,item:"> *",items:".items",keyboard:!0,mousewheel:!1,next:".next",prev:".prev",size:1,speed:400,vertical:!1,touch:!0,wheelSpeed:0}};function b(a,b){var c=parseInt(a.css(b),10);if(c)return c;var d=a[0].currentStyle;return d&&d.width&&parseInt(d.width,10)}function c(b,c){var d=a(c);return d.length<2?d:b.parent().find(c)}var d;function e(b,e){var f=this,g=b.add(f),h=b.children(),i=0,j=e.vertical;d||(d=f),h.length>1&&(h=a(e.items,b)),e.size>1&&(e.circular=!1),a.extend(f,{getConf:function(){return e},getIndex:function(){return i},getSize:function(){return f.getItems().size()},getNaviButtons:function(){return n.add(o)},getRoot:function(){return b},getItemWrap:function(){return h},getItems:function(){return h.find(e.item).not("."+e.clonedClass)},move:function(a,b){return f.seekTo(i+a,b)},next:function(a){return f.move(e.size,a)},prev:function(a){return f.move(-e.size,a)},begin:function(a){return f.seekTo(0,a)},end:function(a){return f.seekTo(f.getSize()-1,a)},focus:function(){d=f;return f},addItem:function(b){b=a(b),e.circular?(h.children().last().before(b),h.children().first().replaceWith(b.clone().addClass(e.clonedClass))):(h.append(b),o.removeClass("disabled")),g.trigger("onAddItem",[b]);return f},seekTo:function(b,c,k){b.jquery||(b*=1);if(e.circular&&b===0&&i==-1&&c!==0)return f;if(!e.circular&&b<0||b>f.getSize()||b<-1)return f;var l=b;b.jquery?b=f.getItems().index(b):l=f.getItems().eq(b);var m=a.Event("onBeforeSeek");if(!k){g.trigger(m,[b,c]);if(m.isDefaultPrevented()||!l.length)return f}var n=j?{top:-l.position().top}:{left:-l.position().left};i=b,d=f,c===undefined&&(c=e.speed),h.animate(n,c,e.easing,k||function(){g.trigger("onSeek",[b])});return f}}),a.each(["onBeforeSeek","onSeek","onAddItem"],function(b,c){a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){b&&a(f).on(c,b);return f}});if(e.circular){var k=f.getItems().slice(-1).clone().prependTo(h),l=f.getItems().eq(1).clone().appendTo(h);k.add(l).addClass(e.clonedClass),f.onBeforeSeek(function(a,b,c){if(!a.isDefaultPrevented()){if(b==-1){f.seekTo(k,c,function(){f.end(0)});return a.preventDefault()}b==f.getSize()&&f.seekTo(l,c,function(){f.begin(0)})}});var m=b.parents().add(b).filter(function(){if(a(this).css("display")==="none")return!0});m.length?(m.show(),f.seekTo(0,0,function(){}),m.hide()):f.seekTo(0,0,function(){})}var n=c(b,e.prev).click(function(a){a.stopPropagation(),f.prev()}),o=c(b,e.next).click(function(a){a.stopPropagation(),f.next()});e.circular||(f.onBeforeSeek(function(a,b){setTimeout(function(){a.isDefaultPrevented()||(n.toggleClass(e.disabledClass,b<=0),o.toggleClass(e.disabledClass,b>=f.getSize()-1))},1)}),e.initialIndex||n.addClass(e.disabledClass)),f.getSize()<2&&n.add(o).addClass(e.disabledClass),e.mousewheel&&a.fn.mousewheel&&b.mousewheel(function(a,b){if(e.mousewheel){f.move(b<0?1:-1,e.wheelSpeed||50);return!1}});if(e.touch){var p={};h[0].ontouchstart=function(a){var b=a.touches[0];p.x=b.clientX,p.y=b.clientY},h[0].ontouchmove=function(a){if(a.touches.length==1&&!h.is(":animated")){var b=a.touches[0],c=p.x-b.clientX,d=p.y-b.clientY;f[j&&d>0||!j&&c>0?"next":"prev"](),a.preventDefault()}}}e.keyboard&&a(document).on("keydown.scrollable",function(b){if(!(!e.keyboard||b.altKey||b.ctrlKey||b.metaKey||a(b.target).is(":input"))){if(e.keyboard!="static"&&d!=f)return;var c=b.keyCode;if(j&&(c==38||c==40)){f.move(c==38?-1:1);return b.preventDefault()}if(!j&&(c==37||c==39)){f.move(c==37?-1:1);return b.preventDefault()}}}),e.initialIndex&&f.seekTo(e.initialIndex,0,function(){})}a.fn.scrollable=function(b){var c=this.data("scrollable");if(c)return c;b=a.extend({},a.tools.scrollable.conf,b),this.each(function(){c=new e(a(this),b),a(this).data("scrollable",c)});return b.api?c:this}})(jQuery);
(function(a){var b=a.tools.scrollable;b.navigator={conf:{navi:".navi",naviItem:null,activeClass:"active",indexed:!1,idPrefix:null,history:!1}};function c(b,c){var d=a(c);return d.length<2?d:b.parent().find(c)}a.fn.navigator=function(d){typeof d=="string"&&(d={navi:d}),d=a.extend({},b.navigator.conf,d);var e;this.each(function(){var b=a(this).data("scrollable"),f=d.navi.jquery?d.navi:c(b.getRoot(),d.navi),g=b.getNaviButtons(),h=d.activeClass,i=d.history&&history.pushState,j=b.getConf().size;b&&(e=b),b.getNaviButtons=function(){return g.add(f)},i&&(history.pushState({i:0},""),a(window).on("popstate",function(a){var c=a.originalEvent.state;c&&b.seekTo(c.i)}));function k(a,c,d){b.seekTo(c),d.preventDefault(),i&&history.pushState({i:c},"")}function l(){return f.find(d.naviItem||"> *")}function m(b){var c=a("<"+(d.naviItem||"a")+"/>").click(function(c){k(a(this),b,c)});b===0&&c.addClass(h),d.indexed&&c.text(b+1),d.idPrefix&&c.attr("id",d.idPrefix+b);return c.appendTo(f)}l().length?l().each(function(b){a(this).click(function(c){k(a(this),b,c)})}):a.each(b.getItems(),function(a){a%j==0&&m(a)}),b.onBeforeSeek(function(a,b){setTimeout(function(){if(!a.isDefaultPrevented()){var c=b/j,d=l().eq(c);d.length&&l().removeClass(h).eq(c).addClass(h)}},1)}),b.onAddItem(function(a,c){var d=b.getItems().index(c);d%j==0&&m(d)})});return d.api?e:this}})(jQuery);

 

《style.css》

@charset "UTF-8";

body{
  margin: 0;
  padding: 0;
  background: #FFF url(../img/header_bg.png) repeat-x;
}
#container {
  width: 800px;
  margin: 0 auto;
}
footer {
  text-align: center;
}
p{
  margin: 0;
}
h1{
  margin: 0 0 1em;
  height: 30px;
  
  line-height: 30px;
  font-size: 1em;
  font-size: 1rem;
  color: #FFF;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}
.slider-area{
  position: relative;
  width: 800px;
  margin: 0 auto 2em;
}
.scrollable{
  position: relative;
  width: 700px;
  height: 390px;
  margin: 0 auto;
  overflow: hidden;
}
.items{
  width: 20000px;
  position: absolute;
}
.item{
  position: relative;
  float: left;
  width: 700px;
  height: 390px;
}
.photo img{
  width: 100%;
  height: auto;
}
.comment{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  padding: 0.5em;
  background: #FFF;
  background: rgba(255,255,255,.6);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ボタンのCSS（http://jquerytools.org/media/css/scrollable-buttons.cssを参考） */

/* prev, next, prevPage and nextPage buttons */
a.browse {
  background:url(../img/hori_large.png) no-repeat;
  display:block;
  width:30px;
  height:30px;
  float:left;
  margin:40px 10px;
  cursor:pointer;
  font-size:1px;
}

/* right */
a.right { 
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
  background-position: 0 -30px;
  clear:right; margin-right: 0px;
}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { 
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  margin-left: 0px;
  }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* disabled navigational button */
a.disabled {
  visibility:hidden !important;
}

/* ナビゲーション部分のCSS（http://jquerytools.org/media/css/scrollable-navigator.css） */

/* position and dimensions of the navigator */
.navi {
  text-align: center;
  height:20px;
}

/* items inside navigator */
.navi a {
  width:8px;
  height:8px;
  margin:3px;
  background:url(../img/navigator.png) 0 0 no-repeat;
  display:inline-block;
  font-size:1px;
}

/* mouseover state */
.navi a:hover {
  background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
  background-position:0 -16px;
}

/* iPad縦の想定サイズ */

@media (min-width: 481px) and (max-width: 768px){
.slider-area{
  width: 700px;
}
.scrollable,.item{
  width: 620px;
  height: 351px;
}
}

/* iPhone想定サイズ（横向きから） */
@media (max-width: 480px){
.slider-area{
  width: 320px;
}
.scrollable,.item{
  width: 320px;
  height: 179px;
}
.slider-area a.browse{
  display: none;
}
}