Source

கொணர்வி

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

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

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

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

இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

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

கடைசியாக, நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்குகிறீர்கள் என்றால், அதற்கு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="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </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>

அடுத்த உருப்படிக்கு தானாக சைக்கிள் ஓட்டுவதற்கு இடையே தாமதமாகும் நேரத்தை மாற்ற, 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"பக்க ஏற்றத்தில் தொடங்கி ஒரு கொணர்வியை அனிமேட் செய்வதாகக் குறிக்க பண்புக்கூறு பயன்படுத்தப்படுகிறது . உங்கள் கொணர்வியை துவக்க நீங்கள் பயன்படுத்தவில்லை என்றால் data-ride="carousel", அதை நீங்களே துவக்க வேண்டும். அதே கொணர்வியின் (தேவையற்ற மற்றும் தேவையற்ற) வெளிப்படையான ஜாவாஸ்கிரிப்ட் துவக்கத்துடன் இதைப் பயன்படுத்த முடியாது.

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

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

$('.carousel').carousel()

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

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

பெயர் வகை இயல்புநிலை விளக்கம்
இடைவெளி எண் 5000 ஒரு பொருளை தானாக சைக்கிள் ஓட்டுவதற்கு இடையில் தாமதமாகும் நேரம். தவறு எனில், கொணர்வி தானாகவே சுழற்சி செய்யாது.
விசைப்பலகை பூலியன் உண்மை விசைப்பலகை நிகழ்வுகளுக்கு கொணர்வி எதிர்வினையாற்ற வேண்டுமா.
இடைநிறுத்தம் சரம் | பூலியன் "பயணம்"

என அமைக்கப்பட்டால் "hover", கொணர்வியின் சைக்கிள் ஓட்டத்தை இடைநிறுத்தி, கொணர்வியின் mouseenterசைக்கிள் ஓட்டத்தை மீண்டும் தொடங்கும் mouseleave. என அமைக்கப்பட்டால் false, கொணர்வியின் மேல் வட்டமிடுவது இடைநிறுத்தப்படாது.

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

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

.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">).

நிகழ்வு வகை விளக்கம்
slide.bs.கொணர்வி slideநிகழ்வு முறை செயல்படுத்தப்படும் போது இந்த நிகழ்வு உடனடியாக எரிகிறது.
slid.bs.கொணர்வி கொணர்வி அதன் ஸ்லைடு மாற்றத்தை முடித்தவுடன் இந்த நிகழ்வு நீக்கப்பட்டது. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

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

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