اسلاید شو 3 بعدی با جی کوئری

با استفاده از این پلاگین می توانید اسلاید شو 3 بعدی داشته باشید

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <link rel="stylesheet" href="impulseslider.css" type="text/css" media="screen" />
    <script src="jquery-1.js"></script>
    <script src="jquery.js"></script>

کد html جهت استفاده پلاگین و کد های اصلی اسلاید شو

<div class="container">
    <div style="perspective: 800px; width: 300px; height: 450px;" id="slider-container">
        <div style="transition: all 1.5s ease-in-out 0s; transform: rotateY(5520deg);" id="slider">
            <div style="transform: rotateY(0deg) translateZ(85.7143px);" class="face one">
                <img class="img_slider active" src="sky-scrapper.JPG">
            </div>
            <div style="transform: rotateY(120deg) translateZ(85.7143px);" class="face two">
                <img class="img_slider" src="golden-gate.JPG">
            </div>
            <div style="transform: rotateY(240deg) translateZ(85.7143px);" class="face three">
                <img class="img_slider" src="eiffel.JPG">
            </div>
        </div>
        <div class="nav">
            <span class="left arrow" style="">&lt;</span>
            <span class="right arrow">&gt;</span>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').impulseslider({
            height: 450,
            width: 300,
            pauseTime: 2500,
            transitionDuration: 1500,
            transitionEffect: "ease-in-out",
            autostart: true,
            rightSelector: ".right",
            leftSelector: ".left",
            pauseSelector: ".pause",
            directionRight: true,
            containerSelector: "#slider-container",
            spinnerSelector: "#slider"
        });
    });
</script>

نظر یادتون نره