අපි දැන් දින ගණනාවක් තිස්සේ  Bootstrap ගැන කතාකරනවා.  ඉතින් අද පොඩි ඇඩ්වාන්ස් වැඩ කැල්ලක් ගැන කතා කරන්නයි අපේ සූදානම. හැමෝම දැකලා ඇති ගොඩක් වෙබ් අඩවි වල Sliders තියෙනවා.  CSS , flash, Jquery ආදිය එක්ක ගොඩක් මහන්සි වෙලා තමා මේවා හදන්නේ. ඒත් දැන් Bootstrap  නිසා ඉතාම පහසුවෙන් අපිට ස්ලයිඩර්ස් හදාගන්න පුළුවන්. Text images  ආදි ඕනැම ආකාරයකින් මේක කරගන්න පුළුවන්.

Carousel Slider - boostrap.com
Carousel Sliderbootstrap.com

දැන් මුලින්ම අපි කරන්න ඕන  slider එකට අවශ්‍ය div එක  හදාගෙන ඒකේ class  හදාගන්න ඕන. “carousel slide”  කියන  class  එක තමා ඒකට අපි පාවිච්චි කරන්නේ.

Bootstrap CSS හා JQuery එකතු කරගත්තාට පස්සේ, 
මුලින්ම අපි ස්ලයිඩර් එකේ ඩිවිශන් වෙන් කරගත්තාට පස්සේ අදාල ක්ලාස් සහා ඩේටා රයිඩර්ස් ඇඩ් කරගන්න ඕන. data-ride=”carousel” 

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

දැන් මේ කොටස ඇතුලේ සලයිඩරයට අවශ්‍ය අංගෝපාංග ඇතුලත් කරගන්න පුළුවන්. මම මේකේදී ස්ලයිඩරයකට ඇතුල් කල හැකි සියල්ල ඇතුලත් කරන්න උත්සහා කරනවා.

  • Slider only (Slider එකට අවශ්‍ය පින්තූරය හෝ අකුරු පමණක්)
  • Controlers
    • Indicators (Slider එක අදාල කොටස දැක්වෙන අංග)
    • Navigation (backward / forward ඉදිරියට පසුපසට යෑමට අවශ්‍ය ඊතල)
  • Captions
    • Slider Header Text (Slider එකට අවශ්‍ය උදෘත පාඨය)
    • Slider Sub Text (Slider එකට අවශ්‍ය කෙටි සටහන)

Sliders  පමණක් එකතු කරගැනීම [Slider only ]

Sliders Only - boostrap.com
Sliders Only bootstrap.com

මුලින්ම බලමු එහෙනම් Slider  එක ඇඩ් කරගන්න විදිය.  ඒකට දැන් අර මුලින්ම හදාගත්ත DIV එක ඇතුලට මේ විදියට කෝඩ් එක එකතු කරගන්න ඕන.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="Image URL" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="Image URL" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="Image URL" alt="Third slide">
    </div>
  </div>
</div>

මෙතන වෙන්නේ 100px ක පළල සහිත සලයිඩර් එකක් නිර්මාණය වීමයි. ඒක ඇතුලේ පින්තූර පමණක් ඔබට බලාගන්න පුළුවන්.

<div class="carousel-inner"> කොටස මගින් Slider එක ඇරඹේ..
 <div class="carousel-item"> Slider අයිතම ඇඩ් කරනු ලබයි...

carousel-item active  කියන කොටස ඇතුලත් කීරිමෙන් පළමුවෙන් පෙන්විය යුතු Slide එක සැකසීමට හැකිය.

Navigation සමගින් SLIDER සාදාගැනීම

Slider with navigation - Boostrapcreative.com
Slider with navigationBootstrapcreative.com

දැන් අපි මූලික Slider  එකක් දාගත්තා නේ. අපිට පුළුවන් දැන් මේ සලයිඩර් එකට Next හා previous Button දාගන්න. එවිට මේවා කුඩා ඊ හිස් විදියට Slider   එක දෙපසින් දිස් වේවී. ඒකට අපි තියෙන Slider  කෝඩ් එකටම පහත කොටස එකතු කරගන්න ඕන.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Indicators සමගින් SLIDER සාදාගැනීම

Slider with Indicators
Slider with Indicators Bootstrap.com

දැන් මේ SLIDER වලට අපි දාගන්නවා පොඩි යොමුවක්. ඒ කියන්නේ මේ වෙලාවේ පෙන්නුම් කරන සහා පෙන්වීමට නියමිත Slide එක මොකක් ද කියලා දක්වන කුඩා යොමුවක් සැකසීමයි. 

ඒකට අපි කරන්නේ සලයිඩරය තුලට කුඩා ලැයිස්තුවක් ඇතුලත් කරගැනීමයි. <ol> <li><li> </ol> ආදී වශයෙන්  සාදා class=”carousel-indicators” කියන ක්ලාස් එකට දාගන්න එක. ඒක SLIDER අයිතම එකතු කරගන්න කලින්ම දාගන්න ඕන.  එහිදී අදාල ලැයිස්තු අයිතම කුමන SLIDE එකට දැයි දැක්විය යුතු වේ. data-slide-to=”0″ ලෙස එය සදහන් කල යුතුයි.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

SLIDE එකට Captions එකක් දාගැනීම

Slider with Caption  - Bootstrap.com
Slider with CaptionBootstrap.com

අපි දැන් හදාගත්ත SLIDE  එක මතකයි නේ. ඒකේ පින්තූරයක් පමණක් වෙනුවට කුඩා මාතෘකාවක් ඊට අදාල සටහනක් ඇඩ් කරගන්නත් පුළුවන්. නැත්නම් පින්තූරය වෙනුවට TEXT කොටසක් වුවත් මෙහිදී එකතු කරගන්න පුළුවන් <img> ටැග් එක ඉවත් කර අනිකුත් ටික තිබීමට ඇරීමෙන්..

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

මේ තියෙන්නේ ඔය සියලුම ආකාරයේ function සහිත SLIDER එක සදහා කෝඩ් එක. මේක අවශ්‍ය පරිදි images  එකතු කරලා වචන දාලා ඔයාට ඕන විදියට කස්ටමයිස් කරගන්න පුළුවන්. ඒ විදියට හදපු SLIDER එක ඔයාගේ වෙබ් අඩවියේ ඕනම තැනකට දාගන්න පුළුවන්.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

දැන් අපිට SLIDER හදන්න වෙනම javascript css ඕන නැ. bootstrap  කියන්නේ මේ ඔක්කෝම අඩංගු පැකේජයක් නිසා. ආය තවත් පාඩමකින් හමුවෙමු.

අදහස් දක්වන්න

අදහස්

‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now