ALBERT SITE

jquery.touchslider.min.zip

상단 스크립트 입력단

=======================================================

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script src="jquery.touchslider.min.js">script>
<script>
jQuery(function($) {
    $(".touchslider").touchSlider({/*options*/});
});
script>

 

상단 body입력단

======================================================

<div class="touchslider">
    <div class="touchslider-viewport" style="width:500px;overflow:hidden"><div>
        <div class="touchslider-item">div>
        <div class="touchslider-item">div>
        ...
    div>div>

    <div>
        <span class="touchslider-prev">←span>
        <span class="touchslider-nav-item touchslider-nav-item-current">1span>
        <span class="touchslider-nav-item">2span>
        ...
        <span class="touchslider-next">→span>
    div>
div>

 

jquery option

=====================================================

container: this, duration: 350, // the speed of the sliding animation in milliseconds
delay: 3000, // initial auto-scrolling delay for each loop
margin: 5, // borders size. The margin is set in pixels.
mouseTouch: true,
namespace: "touchslider",
next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
pagination: ".touchslider-nav-item",
currentClass: "touchslider-nav-item-current", // class name for current pagination item.
prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
scroller: viewport.children(),
autoplay: false, // whether to move from image to image automatically
viewport: ".touchslider-viewport"

 

참고링크주소

http://touchslider.com/