در این مقاله می خواهیم یک slider را به حرکت در بیاریم و ارتفاع و جهت آنرا تغییر دهیم این کار به سادگی با jquery انجام میشود

معمولا در اکثر سایت ها از یک اسلایدر برای نمایش تصاویر به کاربر استفاده می شود که آن اسلایدر داری یک جهت و یک ارتفاع مشخص می باشد اگر ما به خواهیم جهت هر اسلاید را تغییر دهیم باید یک نوع جدید از اسلایدر را بسازیم در این مقاله یک نمونه از تغییر جهت را مشاهده خواهیم کرد و شما کافی است راه حل را فرا بگیرید و تغییرات لازم را روی اسلایدر خود پیاده سازی کنید.

کد زیر را در صفحه وب خود قرار دهید:

<div class="mainBox">

    <div class="mainBox_content">

        <div class="firstBox"><a href="#" class="call_next">See Next</a>

        </div>

        <div class="secondBox"><a href="#" class="go_back">Go Back</a></div>

    </div>

</div>

استایل زیر را در تگ head صفحه خود قرار دهید:

   <style>

.mainBox {

    background-color:#ccc;

    width:500px;

}

 

.mainBox_content {

    width:80%;

    margin:0 auto;

}

 

.firstBox {

    width:100%;

    background-color:rgb(0, 143, 255);

    min-height:300px;

}

 

.secondBox {

    width:100%;

    background-color:rgb(255, 102, 0);

    min-height:500px;

    display:none;

}

    </style>

حالا نوبت به اضافه کردن فایل های jquery به پروژه می رسد فایل ها رو در فایل ضمیمه قرار داده شده است از آنجا میتوانید بردارید و به پروژه خود اضافه کنید:

<script src="jquery-1.9.1.js"></script>

    <script src="jquery-ui-1.10.3.js"></script>

توابع زیر را اضافه کنید:

   <script>

            

            $(".call_next").click(function () {

                $(".firstBox").hide();

                $(".mainBox_content").animate({ height: '500px' }, 300, function () {

                    $(".secondBox").show('slide', { direction: 'right' }, 500);

                });

            });

 

            $(".go_back").click(function () {

                $(".secondBox").hide();

                $(".mainBox_content").animate({ height: '300px' }, 300, function () {

                    $(".firstBox").show('slide', { direction: 'left' }, 500);

                });

            });

    </script>

حالا برنامه را اجرا کنید.

همانطور که مشاهده می کنید یکی از توابع روی کلاس call_next کار میکند و تابع دیگر روی کلاس go_back کار میکند هرگاه رویداد کلیک عنصر کلاس next فراخوانی شودارتفاع و جهت اسلاید تغییر می کند