آموزش پلاگین carousel در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش پلاگین carousel در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین carousel در بوت استرپ خواهیم پرداخت.

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

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

مثال

نمایش اسلایدی ساده در زیر یک مولفه عمومی را برای دوچرخه سواری از طریق عناصر مانند carousel، با استفاده از پلاگین carousel نشان می دهد. برای اجرای carousel، فقط باید کد را با علامت گذاری اضافه کنید. نیازی به ویژگی های داده نیست ، فقط یک توسعه ساده مبتنی بر کلاس وجود دارد.

&lt;div id = "myCarousel" class = "carousel slide"&gt;
   
   &lt;!-- Carousel indicators --&gt;
   &lt;ol class = "carousel-indicators"&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "0" class = "active"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "1"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "2"&gt;&lt;/li&gt;
   &lt;/ol&gt;   
   
   &lt;!-- Carousel items --&gt;
   &lt;div class = "carousel-inner"&gt;
      &lt;div class = "item active"&gt;
         &lt;img src = "/bootstrap/images/slide1.png" alt = "First slide"&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide2.png" alt = "Second slide"&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide3.png" alt = "Third slide"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;!-- Carousel nav --&gt;
   &lt;a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"&gt;&amp;lsaquo;&lt;/a&gt;
   &lt;a class = "carousel-control right" href = "#myCarousel" data-slide = "next"&gt;&amp;rsaquo;&lt;/a&gt;
   
&lt;/div&gt;

</ol>

</div>

</div>

</div>

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

First slide

کپشن های اختیاری

شما می توانید به راحتی با عنصر زیرنویس carousel. در هر عنصر. زیرنویس ها را به راحتی به اسلایدهای خود اضافه کنید. تقریباً هر HTML اختیاری را در آن قرار دهید و به طور خودکار تراز و قالب بندی می شود. مثال زیر این را نشان می دهد –

&lt;div id = "myCarousel" class = "carousel slide"&gt;
   
   &lt;!-- Carousel indicators --&gt;
   &lt;ol class = "carousel-indicators"&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "0" class = "active"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "1"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "2"&gt;&lt;/li&gt;
   &lt;/ol&gt;   
   
   &lt;!-- Carousel items --&gt;
   &lt;div class = "carousel-inner"&gt;
      &lt;div class = "item active"&gt;
         &lt;img src = "/bootstrap/images/slide1.png" alt = "First slide"&gt;
         &lt;div class = "carousel-caption"&gt;This Caption 1&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide2.png" alt = "Second slide"&gt;
         &lt;div class = "carousel-caption"&gt;This Caption 2&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide3.png" alt = "Third slide"&gt;
         &lt;div class = "carousel-caption"&gt;This Caption 3&lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;!-- Carousel nav --&gt; 
   &lt;a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"&gt;&amp;lsaquo;&lt;/a&gt;
   &lt;a class = "carousel-control right" href = "#myCarousel" data-slide = "next"&gt;&amp;rsaquo;&lt;/a&gt;+
&lt;/div&gt;

</ol>

<div class = "carousel-caption">This Caption 1</div>

</div>

<div class = "carousel-caption">This Caption 2</div>

</div>

<div class = "carousel-caption">This Caption 3</div>

</div>

<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 را به راحتی کنترل کنید.
Attribute data-slide کلمات کلیدی prev یا next را می پذیرد، که موقعیت اسلاید را نسبت به موقعیت فعلی آن تغییر می دهد.
از data-slide-to استفاده کنید تا یک شاخص اسلاید خام به carousel داده شود-data-slide-to = “2” ، که موقعیت اسلاید را به یک شاخص خاص تغییر می دهد که با 0 شروع می شود.
از ویژگی data-ride = “carousel”برای علامت گذاری چرخ فلک به عنوان یک انیمیشن که از بارگذاری صفحه شروع می شود استفاده می شود.
از طریق JavaScript – می توان چرخ فلک را به صورت دستی با JavaScript به صورت زیر فراخوانی کرد –

$('.carousel').carousel()

1	$('.carousel').carousel()

گزینه ها

موارد خاصی وجود دارد ، گزینه هایی که می توانند از طریق مشخصه های داده منتقل شوند یا JavaScript در جدول زیر ذکر شده اند –

نام گزینه	مقدار پیش فرض	نام ویژگی داده	توضیح
interval	number Default − 5000	data-interval	مدت زمان تأخیر بین چرخه خودکار یک مورد. اگر نادرست باشد، carousel به طور خودکار چرخه نمی یابد.
pause	string Default − “hover”	data-pause	چرخه carousel را روی مرکز ماوس متوقف کرده و چرخه carousel را روی صفحه ماوس از سر می گیرد.
wrap	boolean Default − true	data-wrap	carousel باید به طور مداوم چرخش کند یا توقف داشته باشد

متدها

در اینجا لیستی از روش های مفید قابل استفاده با کد carousel آورده شده است.

ons

There are certain, options which can be passed via data attributes or JavaScript are listed in the following table −

Option Name	Type/Default Value	Data attribute name	Description
interval	number Default − 5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string Default − “hover”	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean Default − true	data-wrap	Whether the carousel should cycle continuously or have hard stops.

Methods

Here is a list of useful methods that can be used with carousel code.

متد

توضیح

مثال

carousel(options).

carousel را با یک گزینه اختیاری شروع می کند و شروع به چرخه از طریق موارد می کند.

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">carousel</span><span class="pun">({</span><span class="pln">
   interval</span><span class="pun">:</span> <span class="lit">2000</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">carousel</span><span class="pun">({</span><span class="pln">

interval</span><span class="pun">:</span> <span class="lit">2000</span>

carousel(‘cycle’).

carousel را از چپ به راست سیکل می کند.

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

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

carousel(‘pause’).

carousel را از سیکل در وسایل متوقف می کند.

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

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

carousel(number).

carousel را به یک قاب خاص سیکل می کند (0 پایه ، مشابه آرایه).

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

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

carousel(‘prev’).

سیکل به آیتم قبلی

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

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

carousel(‘next’).

سیکل به آیتم بعدی

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

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

مثال

مثال زیر استفاده از متد ها را نشان می دهد

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

&lt;script&gt;
   $(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);
      });
   });
&lt;/script&gt;

</ol>

</div>

</div>

</div>

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

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

First slide

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

رویداد

توضیح

مثال

slide.bs.carousel

این رویداد با فراخوانی روش نمونه اسلاید بلافاصلهشروع می شود

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'slide.bs.carousel'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'slide.bs.carousel'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

slid.bs.carousel

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

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'slid.bs.carousel'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#identifier'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'slid.bs.carousel'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

مثال

مثال زیر استفاده از رویدادها را نشان می دهد –

&lt;div id = "myCarousel" class = "carousel slide"&gt;
   
   &lt;!-- Carousel indicators --&gt;
   &lt;ol class = "carousel-indicators"&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "0" class = "active"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "1"&gt;&lt;/li&gt;
      &lt;li data-target = "#myCarousel" data-slide-to = "2"&gt;&lt;/li&gt;
   &lt;/ol&gt;   
   
   &lt;!-- Carousel items --&gt;
   &lt;div class = "carousel-inner"&gt;
      &lt;div class = "item active"&gt;
         &lt;img src = "/bootstrap/images/slide1.png" alt = "First slide"&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide2.png" alt = "Second slide"&gt;
      &lt;/div&gt;
      
      &lt;div class = "item"&gt;
         &lt;img src = "/bootstrap/images/slide3.png" alt = "Third slide"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;!-- Carousel nav --&gt;
   &lt;a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"&gt;&amp;lsaquo;&lt;/a&gt;
   &lt;a class = "carousel-control right" href = "#myCarousel" data-slide = "next"&gt;&amp;rsaquo;&lt;/a&gt;
    
&lt;/div&gt; 

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

</ol>

</div>

</div>

</div>

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

$(function() {

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

alert("This event fires immediately when the slide instance method" +"is invoked.");

});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش پلاگین carousel در بوت استرپ

آموزش پلاگین carousel در بوت استرپ

مثال

کپشن های اختیاری

کاربردها

گزینه ها

متدها

ons

Methods

مثال

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش پلاگین carousel در بوت استرپ

مثال

کپشن های اختیاری

کاربردها

گزینه ها

متدها

ons

Methods

مثال

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه