ورود / ثبت نام
0
0

ایجاد Responsive Image Carousel با استفاده از Bootstrap و جی کوئری

849 بازدید
Responsive Image Carousel

Responsive Image Carousel

مقاله برای طراحی یک اسلایدر در بوت استرپ با نام Responsive Image Carousel که توسط جی کوئری انجام میشود برای ساخت قدم به قدم آن همراه من باشید.کاربران انتظار دارند بتوانند وب سایت خود را روی هر وسیله ای که در دسترس دارند و قابلیت اتصال به اینترنت دارد مشاهده کنند. امروزه برای وب سایت ها، رسیدن به این تجربه رضایت بخش کاربر در تمامی وسیله ها مانند تبلت ها، گوشی های هوشمند، لپ تاپ ها و صفحه نمایش های بزرگ یکی از اهداف اصلی است. طراحی ریسپانسیو وب سایت پاسخی به این نیاز است، که پلت فرم و انعطافی را فراهم می کند که می توانیم کد را یک بار بنویسیم و در هر جایی از آن استفاده کنیم.

کتابخانه Twitter Bootstrap محبوب ترین فریم ورک ریسپانسیو تا این لحظه می باشد.

در این مقاله با استفاده از کتابخانه Twitter Bootstrap و طراحی ریسپانسیو یک Image Slider ایجاد می کنیم. همچنین زمانی که بخواهیم یک slide show یا image carousel برای وب سایت ایجاد کنیم، پلاگین Twitter Bootstrap carousel انتخاب خوبی است. تنها چیزهایی که لازم داریم یک سری markup، یک پلاگین Bootstrap و چند خط کد جی کوئری است.

یک فایل HTML جدید با نام “BootstrapImageCarousel.html” ایجاد می کنیم. کار را با تگ <div> به عنوان یک parent  container و با کلاس زیر شروع می کنیم.

<div id="imgcarousel" class="carousel" data-ride="carousel"></div>

برای ایجاد شاخص ها، یک لیست ترتیبی با کلاس استاندارد bootstrap به نام “carousel-indicator” و چند عنصر در آن ایجاد می کنیم. Data-target روی imgcarousel تنظیم شده و data-slide برای اشاره کردن به مکانی برای نمایش آن استفاده می شود.

<div id="imgcarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">

        <li data-target="#imgcarousel" data-slide-to="0" class="active"></li>

        <li data-target="#imgcarousel" data-slide-to="1"></li>

        <li data-target="#imgcarousel" data-slide-to="2"></li>

        <li data-target="#imgcarousel" data-slide-to="3"></li>

    </ol>

</div>

 

اگر دقت کنید، اولین آیتم <li> کلاسی با عنوان active دارد که مشخص می کند اولین اسلایدی که خواهیم دید، این اسلاید می باشد. علاوه بر کلاس carousel، یک div با کلاس slide طراحی می کنیم که افکت های زیبایی برای اسلاید و حرکت بین تصاویر را به ما می دهد.

HTML5 با توسعه پذیری قابل توجهی طراحی شده است. صفت سفارشی data-* به ما امکان ذخیره برخی اطلاعات خصوصی را در عناصر استاندارد HTML می دهد که با اینکه کاربر نمی تواند آن ها را ببیند اما هیچ تأثیری روی این لایه نمی گذارد. Bootstrap از صفت “data-target” برای مشخص کردن عنصری که رفتار خاصی روی آن اعمال می شود استفاده می کند. در این جا ما data-target را روی #imgcarousel تنظیم کردیم.

حالا وقت آن است که ساختار اسلایدها را تعریف کنیم. برای هر یک از اسلایدها، یک تگ <div> با کلاس item ایجاد می کنیم. درون هر یک از آیتم ها، یک Image را که می خواهیم به carousel اضافه کنیم با خصوصیت src که محل ذخیره سازی آن را مشخص می کند، صفت alt و کلاس img-responsive ایجاد می کنیم. کلاس img-responsive این اطمینان را به ما می دهد که اندازه عکس متناسب با سایز صفحه نمایش تغییر می کند.

<div class="carousel-inner">

    <div class="item active">

        <img src="http://placehold.it/1200x600"

                alt="My First Image" class="img-responsive"/>

    </div>



    <div class="item">

        <img src="http://placehold.it/1200x600"

            alt="My Second Image" class="img-responsive" />

    </div>

    ...



</div>

 

آیتم اول یک کلاس active دارد که نشان می دهد این آیتم اولین تصویری است که بارگزاری می شود. حال اگر برنامه را ذخیره کرده و اجرا کنیم، می توانیم slide show را ببینیم.

حالا می خواهیم ویژگی های دیگری نیز به آن اضافه کنیم. دو فلش اضافه می کنیم، یکی سمت چپ و دیگری سمت راست که به ما کمک می کند بین عکس ها حرکت کنیم. دقیقا بعد از <div class=”carousel-inner”> کنترل های راهبری را به صورت زیر اضافه می کنیم:

<!-- Navigation Controls -->

<a class="left carousel-control" href="#imgcarousel" data-slide="prev">

    <span class="icon-prev"></span>

</a>



    <a class="right carousel-control" href="#imgcarousel" data-slide="next">

    <span class="icon-next"></span>

</a>

 

و در مرحله آخر یک caption و یک توضیح مختصر به هر یک از تصاویر اضافه می کنیم. به <div class=”caroussel-inner”> برگشته و برای هر یک از تگ های div یک <div class=”carousel-caption”> به صورتی که در زیر مشاهده می کنید، اضافه می کنیم:

<div class="item active">

    <img src="http://placehold.it/1200x600"

            alt="My First Image" class="img-responsive"/>

    <div class="carousel-caption">

        <h1>First Image</h1>

        <p>This is my first Image</p>

    </div>

</div>

 

به این ترتیب اگر برنامه را ذخیره کرده و اجرا کنیم، می بینیم که یک image carousel داریم که در وسایل مختلف به خوبی کار می کند. اگر اندازه مرورگر را تغییر بدهیم، می بینیم که تصاویر به خوبی خود را در فضای جدید جا می دهند.

کجا از جی کوئری استفاده کردیم؟؟؟

ممکن است برای شما هم این سوال پیش آمده باشد که ما تمام برنامه را بدون استفاده از حتی یک خط کد جی کوئری نوشتیم. درواقع، گزینه ها و امکانات مشخصی وجود دارند که ممکن است به متد carousel() Bootstrap برای سفارشی سازی قابلیت های آن  ارسال شوند. که در اینجا جی کوئری نقش خود را نشان می دهد.

تغییر وقفه بین نمایش دو اسلاید

به طور پیش فرض این وقفه از اسلایدی به اسلاید دیگر ۵۰۰۰ میلی ثانیه می باشد. ما می توانیم این وقفه را تغییر دهیم یا حتی با تغییر دادن مقدار آن به false، آن را متوقف کنیم. در این مثال، ما این وقفه را به ۲۰۰۰ میلی ثانیه (۲ ثانیه) تغییر می دهیم.

$('.carousel').carousel({

    interval: 2000

})

 

به همین ترتیب قرار دادن مقدار false برای گزینهwrap مشخص می کند که carousel روی آخرین اسلاید متوقف شده و اسلایدها را به صورت اتوماتیک دور نزند.

شروع اسلایدر از شماره اسلاید متفاوت

فرض کنید می خواهید نمایش تصاویر را از اسلاید ۴ شروع کنید، کافی است کد زیر را بنویسید:

$('.carousel').carousel(3);

 

توجه داشته باشید که شماره اسلایدها از ۰ شروع می شود.

استفاده از buttonهای دلخواه برای اسلاید قبل و بعد

اگر می خواهید از دکمه های دلخواه خود برای حرکت بین اسلایدها استفاده نمایید، می توانید به صورت زیر از جی کوئری استفاده نمایید:

$(function(){

    $('#btnprev').on('click',function(){

        $('.carousel').carousel('prev');

    });



    $('#btnnext').on('click',function(){

        $('.carousel').carousel('next');

    });

}

 

در این جا فرض کردیم دو دکمه با شناسه های btnnext و btnprev برای دکمه بعدی و قبلی در صفحه داریم.

مدیریت رویدادها در carousel

شما می توانید رویدادها را در carousel بگیرید و به آن ها پاسخ دهید. فرض کنید می خواهید زمانی که carousel یک دور نمایش اسلایدهای خود را کامل کرد، پیغامی نمایش دهید. برای این کار می توانید از رویداد slid.bs.carousel به صورت زیر استفاده نمایید:

 

$(function () {

    $('.carousel').on('slid.bs.carousel', function () {

        console.log('previous slide transition completed');

    });

});

 

 

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17924
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

9 نظر در مورد ایجاد Responsive Image Carousel با استفاده از Bootstrap و جی کوئری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. سلام مرسی از اموزش خوبتون.
    من از کد های شما استقاده کردم همه حالت های اسلاید شو زو داره ولی عکس ها زیر هم قرار گرفته
    اندازه همه ی عکس ها هم یکیه
    چرا اسلاید شو نمیشه؟؟؟

    ۱

      1. تشکر از لطفتون
        چند مورد از کد های jquery.min و… استفاده کردم ولی بازم مشکلم حل نشد
        اگر لطف کنید و کمکم کنید ممنونتون میشم

        ۱

          1. چه طوری بفهمم فراخونی شده؟؟؟
            چه مشخصه ای داره؟؟؟

            توی اینسپکت
            فسمت stayl روی بیشتر کد ها خط کشیده .

            وقتی توی کد اصلی

            رو پاک میکنم هیچ فرقی نمینه

            ۱

  2. سلام ممنون از توچه تون.

    بله cdn هارو اضافه کردم

    البته متوجه شدم bootstrap.js jquery.js
    رو نوتپد ارور میده و نمیشناسه با اینکه فکر میکنم ادرس دهی درسته!!!

    با این مشکل چه میشه گرد؟؟؟؟

    ۱