கொணர்வி

கொணர்வி போன்ற உறுப்புகள்-படங்கள் அல்லது உரையின் ஸ்லைடுகள் மூலம் சைக்கிள் ஓட்டுவதற்கான ஸ்லைடுஷோ கூறு.

எப்படி இது செயல்படுகிறது

கொணர்வி என்பது CSS 3D உருமாற்றங்கள் மற்றும் ஜாவாஸ்கிரிப்ட்டின் பிட் மூலம் கட்டமைக்கப்பட்ட தொடர்ச்சியான உள்ளடக்கத்தின் மூலம் சைக்கிள் ஓட்டுவதற்கான ஒரு ஸ்லைடுஷோ ஆகும். இது தொடர்ச்சியான படங்கள், உரை அல்லது தனிப்பயன் மார்க்அப் மூலம் வேலை செய்கிறது. இது முந்தைய/அடுத்த கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளுக்கான ஆதரவையும் உள்ளடக்கியது.

பக்கத் தெரிவுநிலை API ஆதரிக்கப்படும் உலாவிகளில் , இணையப்பக்கம் பயனருக்குத் தெரியாதபோது (உலாவி தாவல் செயலற்ற நிலையில் இருக்கும்போது, ​​உலாவி சாளரம் சிறிதாக்கப்பட்டது போன்றவை) ஸ்லைடிங்கைத் தவிர்க்கும்.

உள்ளமைக்கப்பட்ட கொணர்விகள் ஆதரிக்கப்படவில்லை என்பதையும், கொணர்விகள் பொதுவாக அணுகல்தன்மைத் தரங்களுடன் இணங்கவில்லை என்பதையும் கவனத்தில் கொள்ளவும்.

கடைசியாக, நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்குகிறீர்கள் என்றால், அதற்குutil.js .

உதாரணமாக

ஸ்லைடு பரிமாணங்களை கொணர்வி தானாகவே இயல்பாக்காது. எனவே, உள்ளடக்கத்தை சரியான அளவில் அளவிட கூடுதல் பயன்பாடுகள் அல்லது தனிப்பயன் பாணிகளைப் பயன்படுத்த வேண்டியிருக்கலாம். கொணர்விகள் முந்தைய/அடுத்த கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளை ஆதரிக்கும் போது, ​​அவை வெளிப்படையாகத் தேவையில்லை. நீங்கள் பொருத்தமாக இருப்பதைச் சேர்க்கவும் மற்றும் தனிப்பயனாக்கவும்.

ஸ்லைடுகளில் ஒன்றில் .activeவகுப்பைச் சேர்க்க வேண்டும் இல்லையெனில் கொணர்வி காணப்படாது. விருப்பக் கட்டுப்பாடுகளுக்கான தனிப்பட்ட ஐடியை அமைக்கவும் .carousel, குறிப்பாக நீங்கள் ஒரு பக்கத்தில் பல கொணர்விகளைப் பயன்படுத்தினால். கட்டுப்பாடு மற்றும் குறிகாட்டி கூறுகள் உறுப்பு ஐடியுடன் பொருந்தக்கூடிய data-targetபண்புக்கூறு (அல்லது இணைப்புகளுக்கு) இருக்க வேண்டும்.href.carousel

ஸ்லைடுகள் மட்டும்

ஸ்லைடுகளை மட்டும் கொண்ட கொணர்வி இதோ. உலாவி இயல்புநிலை பட சீரமைப்பைத் தடுக்க, கொணர்வி படங்கள் .d-blockஇருப்பதைக் கவனியுங்கள் ..w-100

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

கட்டுப்பாடுகளுடன்

முந்தைய மற்றும் அடுத்த கட்டுப்பாடுகளைச் சேர்த்தல்:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

குறிகாட்டிகளுடன்

கட்டுப்பாடுகளுடன், கொணர்வியில் குறிகாட்டிகளையும் சேர்க்கலாம்.

<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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

தலைப்புகளுடன்

.carousel-captionஏதேனும் உள்ள உறுப்புடன் உங்கள் ஸ்லைடுகளுக்கு எளிதாக தலைப்புகளைச் சேர்க்கவும் .carousel-item. கீழே காட்டப்பட்டுள்ளபடி, விருப்பமான காட்சிப் பயன்பாடுகளுடன் , சிறிய வியூபோர்ட்களில் அவற்றை எளிதாக மறைக்க முடியும் . முதலில் அவற்றை மறைத்து .d-noneநடுத்தர அளவிலான சாதனங்களில் கொண்டு வருகிறோம் .d-md-block.

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

கிராஸ்ஃபேட்

.carousel-fadeஸ்லைடுக்கு பதிலாக ஃபேட் ட்ரான்சிஷன் மூலம் ஸ்லைடுகளை அனிமேட் செய்ய உங்கள் கொணர்வியில் சேர்க்கவும் .

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

தனிப்பட்ட .carousel-itemஇடைவெளி

அடுத்த உருப்படிக்கு தானாக சைக்கிள் ஓட்டுவதற்கு இடையே தாமதமாகும் நேரத்தை மாற்ற, data-interval=""a இல் சேர்க்கவும் ..carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

கொணர்வியின் நிலையை எளிதாகக் கட்டுப்படுத்த தரவு பண்புக்கூறுகளைப் பயன்படுத்தவும். data-slideமுக்கிய வார்த்தைகளை ஏற்றுக்கொள்கிறது prevஅல்லது next, ஸ்லைடு நிலையை அதன் தற்போதைய நிலைக்கு மாற்றும். மாற்றாக, data-slide-toஒரு மூல ஸ்லைடு குறியீட்டை கொணர்விக்கு அனுப்ப பயன்படுத்தவும் data-slide-to="2", இது ஸ்லைடு நிலையை ஒரு குறிப்பிட்ட குறியீட்டிற்கு மாற்றுகிறது 0.

data-ride="carousel"பக்க ஏற்றத்தில் தொடங்கி ஒரு கொணர்வியை அனிமேட் செய்வதாகக் குறிக்க பண்புக்கூறு பயன்படுத்தப்படுகிறது . அதே கொணர்வியின் (தேவையற்ற மற்றும் தேவையற்ற) வெளிப்படையான ஜாவாஸ்கிரிப்ட் துவக்கத்துடன் இதைப் பயன்படுத்த முடியாது.

ஜாவாஸ்கிரிப்ட் வழியாக

கொணர்வியை கைமுறையாக அழைக்கவும்:

$('.carousel').carousel()

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-interval="".

முறைகள்

.carousel(options)

விருப்பத்தேர்வுகளுடன் கொணர்வியைத் objectதொடங்கி உருப்படிகள் மூலம் சைக்கிள் ஓட்டத் தொடங்குகிறது.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

இடமிருந்து வலமாக கொணர்வி உருப்படிகள் மூலம் சுழற்சிகள்.

.carousel('pause')

பொருட்கள் வழியாக சைக்கிள் ஓட்டுவதை கொணர்வி நிறுத்துகிறது.

.carousel(number)

கொணர்வியை ஒரு குறிப்பிட்ட சட்டகத்திற்குச் சுழற்றுகிறது (0 அடிப்படையிலானது, வரிசையைப் போன்றது). இலக்கு உருப்படி காட்டப்படுவதற்கு முன்பு (அதாவது slid.bs.carouselநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது.

.carousel('prev')

முந்தைய உருப்படிக்கான சுழற்சிகள். முந்தைய உருப்படி காட்டப்படுவதற்கு முன்பு (அதாவது slid.bs.carouselநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது.

.carousel('next')

அடுத்த உருப்படிக்கான சுழற்சிகள். அடுத்த உருப்படி காட்டப்படுவதற்கு முன்பு (அதாவது slid.bs.carouselநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது.

.carousel('dispose')

ஒரு தனிமத்தின் கொணர்வியை அழிக்கிறது.

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் கொணர்வி வகுப்பு, கொணர்வி செயல்பாட்டில் இணைக்கும் இரண்டு நிகழ்வுகளை வெளிப்படுத்துகிறது. இரண்டு நிகழ்வுகளும் பின்வரும் கூடுதல் பண்புகளைக் கொண்டுள்ளன:

• direction: கொணர்வி சறுக்கும் திசையில் (ஒன்று "left"அல்லது "right").
• relatedTarget: செயலில் உள்ள பொருளாக மாற்றப்படும் DOM உறுப்பு.
• from: தற்போதைய உருப்படியின் குறியீடு
• to: அடுத்த உருப்படியின் குறியீடு

அனைத்து கொணர்வி நிகழ்வுகளும் கொணர்வியிலேயே சுடப்படுகின்றன (அதாவது இல் <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

மாறுதல் காலத்தை மாற்றவும்

நீங்கள் தொகுக்கப்பட்ட CSS ஐப் பயன்படுத்தினால், தொகுப்பதற்கு முன் சாஸ் மாறி அல்லது தனிப்பயன் பாணியுடன் மாறுதல் காலத்தை .carousel-itemமாற்றலாம் . $carousel-transitionபல மாற்றங்கள் பயன்படுத்தப்பட்டால், உருமாற்ற மாற்றம் முதலில் வரையறுக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும் (எ.கா. transition: transform 2s ease, opacity .5s ease-out).