نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و نهم (Carousel)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و نهم (Carousel)

آموزش Bootstrap جلسه بیست و نهم (Carousel) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه از آمورش به شما نحوه ساخت اسلایدر در بوت استرپ را آموزش می دهد

در این آموزش تنها با کلاس های بوت استرپ می توانید اسلایدر طراحی کنید

این اسلایدر کاملا رسپانسیو بوده و در هر مرورگر و رزولیشنی قابل نمایش است

لازم به ذکر است که برای ساخت این اسلایدر حتما باید jQuery را اضافه کنید

قابلیت اجرای اتوماتیک اسلاید ها از ویژگی های کلاس بوت استرپ است

 

carousel

همانطور که گفتیم از carousel برای ساخت اسلایدر استفاده میشود شما برای اجرای فایل های جیکوئری و جاوا اسکریپت این اسلایدر باید فایل js آن را در سایت خود لود کنید. برای اینکار هم میتوانید از فایل carousel.js استفاده کنید و هم از فایل bootstrap.js البته توجه کنید که هر ۲ را با هم لود نکنید وجود یکی برای اجرای کد ها کافی است.

نکته ای که باید به آن توجه کنید این است که carousel در Internet Explorer 9 و یا نسخه های قدیمی تر آن اجرا نمیشود. علت آن استفاده از دستورات css3 است که این نسخه از مرورگر آن را پشتیبانی نمیکند.

 

چگونه میتوانیم به کمک carousel اسلایدر بسازیم؟

برای پاسخ به این سوال باید ابتدا با نحوه ی استفاده از کد های بوت استرپ برای carousel آشنا شوید و آنها را خدمت شما معرفی کنیم شما حتما باید ابتدا div با id بسازید با نام myCarousel وسپس class با نام carousel تا فضا و بوم مد نظر برای ساخت اسلایدر به وجود بیاید همچنین به کلاس slide نیز نیاز دارید برای موارد حرکت اسلاید و افکت های css3 .

از مقدار attribute تعریف شده data-ride با مقدار carousel استفاده میکنیم تا زمانی که صفحه لود شد بتواند انیمیشن ها را اجرا کند اگر این موضوعات برای شما گنگ است نگران نباشید در انتها نمیونه کد آماده ای را برای شما قرار میدهیم.

خوب وارد بخش شاخص های اسلایدر خود میشویم این بخش برای آن است که اول از همه بفهمیم چند اسلاید داریم و قرار است چند اسلاید به نمایش در بیاید.برای این کار از کلاس carousel-indicators استفاده میکنیم و برای نقطه گذاری و اتصال id که با نام myCarousel ساختیم از data-target استفاده میکنیم و برای مرتب کردن نمایش و رفتن به اسلاید بعدی از data-slide-to استفاده میکنیم که مقادیر ۰ ، ۱ و… را میگیرد.

و در نهایت وارد بخش کنترلی کار میشویم که به شما امکان کنترل دستی اسلایدرتان را میدهد آن موارد را برای شما لیست میکنیم:

  • نمایش تعداد اسلاید موجود برای کاربر.
  • دکمه های اسلایدر بعدی و قبلی که با نام های next و prev شناخته میشوند.
  • بالت هایی که شما امکان حرکت بین اسلاید هارا میدهند.

بخش کنترل های اسلایدر

خوب برای ایجاد موارد گفته شده شما ابتدا باید div با کلاس carousel-inner ایجاد کنید آغاز گر هر اسلاید شما کلاس item است که هر اسلاید را از دیگری جدا میکند برای اینکه در لحظه لود اسلایدری خاص نمایش داده شود میتوانید از کلاس active استفاده کنید. از کلاس carousel-caption میتوانید برای توضیحات هر اسلاید استفاده کنید و در نهایت با data-slide های next برای بعدی و prev برای قبلی میتوانید دکمه های کنترل را ایجاد کنید تمام موارد گفته شده در آموزش در کد زیر خلاصه شده اند کد زیر یک اسلایدر کامل با تمام امکانات است.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="la.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
        <img src="chicago.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>
    
      <div class="item">
        <img src="ny.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

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

آموزش جکوئری های کنترلی carousel

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و هشتم (Media Object)

آموزش Bootstrap جلسه سی ام (Modal)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارات مشاهده کنید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و نهم (Carousel): نوع فایل:mp4 حجم فایل:50.97 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

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

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.