水平スクロールにSly Scrollerを利用しようとしています。ドキュメントを読んで理解しようとしましたが、それを利用する方法がわかりません。
ドキュメントを読むよりも簡単な例で始めるのを手伝ってくれる人はいますjsfiddle
か? あるいは、このテーマに関する実装やチュートリアルを指定することさえできますか?
水平スクロールにSly Scrollerを利用しようとしています。ドキュメントを読んで理解しようとしましたが、それを利用する方法がわかりません。
ドキュメントを読むよりも簡単な例で始めるのを手伝ってくれる人はいますjsfiddle
か? あるいは、このテーマに関する実装やチュートリアルを指定することさえできますか?
例を示す前に、環境を正確に説明してもらいたいと思います (たとえば、php フレームワークを使用していますか?) まず、これらのスクリプトが課金されていることを確認してください: 1-[jquery 1.7] または > 2 -sly.min .js 3 - modernizr.js
. ヒント : 次に、このスクリプトを追加する必要があるため、bower を使用できます。
<script type="text/javascript">
jQuery(function($) {
'use strict';
// -------------------------------------------------------------
// Basic Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function() {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function() {
$frame.sly('remove', -1);
});
}());
// -------------------------------------------------------------
// Centered Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#centered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 4,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Force Centered Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#forcecentered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Cycle By Items
// -------------------------------------------------------------
(function() {
var $frame = $('#cycleitems');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'items',
cycleInterval: 1000,
pauseOnHover: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
// Pause button
$wrap.find('.pause').on('click', function() {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function() {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function() {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// Cycle By Pages
// -------------------------------------------------------------
(function() {
var $frame = $('#cyclepages');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'pages',
cycleInterval: 1000,
pauseOnHover: 1,
startPaused: 1,
// Buttons
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// Pause button
$wrap.find('.pause').on('click', function() {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function() {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function() {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// One Item Per Frame
// -------------------------------------------------------------
(function() {
var $frame = $('#oneperframe');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Crazy
// -------------------------------------------------------------
(function() {
var $frame = $('#crazy');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function() {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function() {
$frame.sly('remove', -1);
});
}());
});
</script>
前のスクリプトでわかるように、いくつかのナビゲーションがあり、ここの html 部分でそのうちの 1 つを選択するだけです。
<div class="frame" id="cycleitems">// you have to put in the id the animation that you like
<ul class="clearfix">
<!-- please insert inside the li tag what you want to put inside the sly scroller :D -->
<li> some code here for example <img src ="blabla" /> </li>
<li> some code here for example <img src ="blabla" /> </li>
<li> some code here for example <img src ="blabla" /> </li>
</ul></div>
そして最後に css 部分:
.crazy ul li:nth-child(2n) {
width: 100px;
margin: 0 4px 0 20px;
}
.crazy ul li:nth-child(3n) {
width: 300px;
margin: 0 10px 0 5px;
}
.crazy ul li:nth-child(4n) {
width: 400px;
margin: 0 30px 0 2px;
}
さらに質問がある場合は、お気軽にお問い合わせください:)
前の回答に加えて、コールバックしたい場合は、
$frame.sly('on','active',function(e,i){
console.log("e",e);
console.log("i",i);
console.log(this.items[i].el.getAttribute("data-filter"));
});
this.items[i].el はアクティブな li を取得します。注: $('this') ではなく this を使用したため、DOM オブジェクトであるため、getAttribute() を使用する必要があります。
私はJsとJqueryも初めてなので、最高のソウルションではないかもしれませんが、私にとってはうまくいきます