Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--ایجاد اسلایدر(Carousels) در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت هفدهم آموزش در زیر قرار داده شده است.

ایجاداسلایدر(Carousels)  در بوت استرپ                                                        قسمت هفدهم

برای ایجاد اسلایدر در بوت Bootstrap مراحل زیر را دنبال کنید :

بخش اول (خارجی ترین <Div>) :

  • برای کنترل عملکرد صحیح Carousels  نیاز به استفاده از یک ID داریم("id="myCarousel)
  • کلاس "class="carousel مشخص می کند که این <Div> یک Carousels (اسلایدر) است
  • کلاس slide. یک افکت هنگام نمایش  دادن آیتم ها را به اسلایدر  اضافه میکند که میتوانید آن را تغییر دهید یا حذف نمایید
  • خصوصیت "data-ride="carousel مشخص کننده زمان اجرای اسلایدر بلافاصله بعد از بارگزاری صفحه می باشد

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

</div>

بخش دوم شاخص ها ("Indicators") :

  • شاخص ها نقطه های کوچکی در پایین هر اسلاید می باشد که نشان می دهد چند اسلاید در Carousels  وجود دارد و کاربر در حال مشاهده کدام اسلاید است
  • شاخص ها با  یک لیست مرتب ساخته می شوند که با کلاس carousel-indicators. مشخص می شوند
  • خصوصیت data-target آیدی اسلایدر را میگیرد
  • خصوصیت data-slide-to مشخص می کند که زمانی که کاربر بر روی هر کدام از شاخص ها کلیک کرد به کدام اسلاید نمایش داده شود

<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>
   <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

بخش سوم ("Wrapper for slides") :

  • همه  اسلاید ها در یک <Div>  قرار میگیرند که با کلاس carousel-inner. مشخص می شوند
  • سپس هر کدام در یک <Div> جداگانه  با کلاس item. قرار می گیرند که این بخش از اسلایدر می تواند شامل متن یا عکس باشد
  • توجه مهم اینکه باید کلاس active. را به یکی از اسلایدهایمان اختصاص دهیم در غیر این صورت اسلایدر نمایش داده نخواهد شد
  • همچنین برای اضافه کردن متن به اسلاید ها در همین بخش یک <Div> با کلاس carousel-caption. اضافه میکنیم

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

بخش چهارم کنترل های چپ و راست ("Left and right controls") :

  • این کد به کاربر قابلیت رفتن به اسلاید قبلی و بعدی را می دهد
  • خصوصیت data-slide مشخص می کند که آیکن ها به سمت چپ یا راست حرکت کنند و دو مقدار "prev" یا "next"  را قبول می کند

<class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>

در مثال زیر یک اسلایدر را با توجه به موارد بالا طراحی کرده ایم :

<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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

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

اجرا به صورت زیر می باشد :

 

6358387995466321311.png

پایان قسمت هفدهم

 ادامه آموزش در قسمت هجدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : https://www.w3schools.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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