جلسه چهل و سوم از دوره آموزش Bootstrap : پلاگین Carousel

پلاگین Carousel

پلاگین های بوت استرپ

پلاگین carousel بوت استرپ ، یک راه حل انعطاف پذیر و واکنش گرا (responsive) برای اضافه کردن یک slider به وب سایت ما می باشد. در این رویکرد ، علاوه بر واکنش گرا بودن ، محتوا به اندازه کافی منعطف می باشد که اجازه دهد تصاویر ، iframe ها، ویدیو ها و یا هر نوع محتوایی که در نظر داریم ، اضافه نماییم.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل carousel.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

مثال

در ادامه ، مثالی با یک slideshow ساده و یک مؤلفه عمومی برای چرخاندن صفحه از طریق عنصری مانند carousel که از طریق پلاگین carousel بوت استرپ فراهم شده است ،  ارائه می شود. برای پیاده سازی carousel ، فقط باید کد را با نشانه گذاری (markup) اضافه کنیم. نیازی به ویژگی های داده وجود ندارد ، فقط نیاز به توسعه ساده مبتنی بر کلاس داریم.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div> 

خروجی قطعه کد فوق به صورت زیر می باشد :

Caption های اختیاری

ما می توانیم به راحتی به اسلایدهای خود با عنصر carousel-caption. ، درون هر item. کپشن اضافه نماییم. هم چنین می توانیم هر HTML اختیاری را داخل آن قرار می دهیم. آیتم موردنظر به صورت خودکار هم تراز شده و قالب بندی خواهد شد. مثال زیر نحوه انجام این کار را نشان می دهد :

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div> 

خروجی قطعه کد فوق به صورت زیر می باشد :

نحوه کاربرد

• از طریق ویژگی های داده : از ویژگی های داده برای ساده کردن کنترل موقعیت carousel استفاده می کنیم.
  • ویژگی data-slide کلمات کلیدی prev یا next را قبول می کند ، که موقعیت slide را نسبت به موقعیت فعلی آن تغییر می دهد.
  • از data-slide-t برای انتقال یک index اسلاید خام به carusel با مقدار "data-slide-t = "2  استفاده می کنیم ، که موقعیت اسلاید را به یک ایندکس خاص که با صفر شروع می شود ، شیفت می دهد.
  • ویژگی "data-ride = “carusel برای نشانه گذاری یک carusel به عنوان یک انیمیشن که صفحه lad را شروع می کند ، استفاده می شود.
• از طریق جاوا اسکریپت : carousel می تواند به صورت دستی با جاوا اسکریپت به صورت زیر فراخوانی شود :

$('.carousel').carousel()

آپشن ها

آپشن های مشخصی وجود دارند که می توانند از طریق ویژگی های داده یا جاوا اسکریپت انتقال داده شوند ، که در جدول زیر فهرست آنها ارائه شده است :

متدها

در اینجا فهرستی از متدهای کاربردی که می توانند با کد carousel مورد استفاده قرار گیرند ، آورده شده است :

$('#identifier').carousel({

   interval: 2000

})

$('#identifier').carousel('cycle')

$('#identifier')..carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

مثال

مثال زیر نحوه کاربرد متدهای فوق را نشان می دهد :

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :

رویدادها

کلاس carousel بوت استرپ دو رویداد را برای اتصال به عملکرد carousel ارائه می دهد که در جدول زیر ذکر شده اند.

$('#identifier').on('slide.bs.carousel', function () {

   // do something

})

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

   // do something

})

مثال

مثال زیر نحوه کاربرد رویدادهای فوق را نشان می دهد :

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :