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

کاربران امروزه انتظار دارند که با هر دستگاهی که در دست دارند وارد سایت شما شوند. دستگاه هایی از قبیل تبلت ها، گوشی های هوشمند، لپتاپ و غیره. وبسایت های واکنش گرا جوابی برای حل این مساله می باشند. ما یک بار آن را طراحی کرده و برنامه را با هر دستگاهی نمایش می دهیم.

کتابخانه Bootstrap پرطرفدارترین فریم ورک واکنش گرا برای طراحی می باشد.

ما در این جا یک اسلایدر واکنش گرا توسط Bootstrap خواهیم ساخت. انتخاب پلاگین Twitter Bootstrap carousel بهترین انتخاب می باشد.

یک صفحه Html جدید ساخته و آن را ‘BootstrapImageCarousel.html’ نامگذاری نمایید. مانند زیر یک تگ <div> ایجاد نمایید.

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

مانند زیر یک لیست مرتب با کلاس استاندارد بوت استرپ با نام ‘carousel-indicator’ ساخته و تعدادی آیتم به این لیست اضافه می نماییم. data-target را روی imgcarousel و data-slide-to را شماره گذاری می کنیم.

<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>

اگر مشاهده کنید می بینید که اولین آیتم دارای کلاسی با نام active می باشد. همچنین برای تگ از کلاس slide هم استفاده کردیم که هنگام تغییر تصاویر از افکت زیبایی استفاده شود.

حالا زمان ساخت ساختار اسلایدر می باشد. برای هر اسلاید یک تگ <div> با Class می سازیم. درون هر آیتم یک تصویری که می خواهیم به اسلایدر اضافه شود را می سازیم. Src آن را محل تصویر و Class آن را img-responsive قرار داده و برای آن یک alt هم می گذاریم. کلاس img-responsive از تناسب تصویر در صفحه نمایش های مختلف مطمئن می شود.(قابلیت Resoponsive)

<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 می باشد. این کلاس وظیفه فعال کردن تصویرها را بر عهده دارد.

اگر شما صفحه را ذخیره و اجرا نمایید یک اسلایدر مشاهده خواهید کرد.

حال تعدادی ویژگی به این تصویر اضافه می کنیم. ما دو فلش یکی در راست و دیگری در چپ برای حرکت میان تصاویرمان قرار می دهیم. کافی است بعد از <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>

حال برای هر عکس توضیحات و تیتر در نظر می گیریم. برای این کار به کلاس <div class=”carousel-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>تصویر اول</h1>
        <p>این اولین تصویر می باشد</p>
    </div>
</div>

حال برنامه را اجرا می کنیم و اسلایدر آماده می باشد. این اسلایدر در تمامی دستگاه های مختلف کار می کند و واکنش گرا می باشد.

چه وقت از JQUERY استفاده می شود؟

اکثر شما شاید تعجب کنید که ما یک اسلایدر بدون استفاده از حتی یک خط کد جی کوئری ساختیم. اما تعجب نکنید زیرا ما از جی کوئری برای ایجاد قابلیت هایی در متد ()Carousel استفاده می کنیم.

سرعت تعویض تصاویر اسلایدر (Inteval)

$('.carousel').carousel({
    interval: 2000
})

این عدد بر حسب میلی ثانیه می باشد.

$('.carousel').carousel(2);

دستور فوق زمانی استفاده می شود که بخواهیم اسلاید شماره 3 تصویر ابتدایی اسلایدر باشد. در صورتیکه از کد بالا استفاده نکنیم تصویر پیش فرض برای اسلایدر شماره 0 می باشد.

استفاده از دکمه سفارشی خودمان برای دکمه های بعدی و قبلی اسلایدها

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

$(function(){
    $('#btnprev').on('click',function(){
        $('.carousel').carousel('prev');
    });
 
    $('#btnnext').on('click',function(){
        $('.carousel').carousel('next');
    });
}

در اینجا به فرض اینکه دکمه ها دارای آیدی های btnnext و btnprev هستند از آنها استفاده کرده ایم.

مدیریت رویدادها در اسلایدر

شما می توانید از رویدادها در اسلایدر استفاده نمایید. برای مثال یک پیغام پس از اتمام اسلایدها در کنسول ظاهر شود.

$(function () {
    $('.carousel').on('slid.bs.carousel', function () {
        console.log('previous slide transition completed');
    });
});

آموزش بوت استرپ