გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

კარუსელი

სლაიდშოუს კომპონენტი ელემენტების - სურათების ან ტექსტის სლაიდების ველოსიპედით გადასაადგილებლად, კარუსელის მსგავსად.

Როგორ მუშაობს

კარუსელი არის სლაიდშოუ ველოსიპედით გადასაადგილებლად კონტენტის სერიის მეშვეობით, აგებულია CSS 3D ტრანსფორმაციებით და ცოტა JavaScript-ით. ის მუშაობს სურათების, ტექსტის ან მორგებული მარკირების სერიით. იგი ასევე მოიცავს წინა/შემდეგი კონტროლისა და ინდიკატორების მხარდაჭერას.

ბრაუზერებში, სადაც გვერდის ხილვადობის API არის მხარდაჭერილი, კარუსელი თავიდან აიცილებს სრიალს, როდესაც ვებგვერდი მომხმარებლისთვის არ ჩანს (მაგალითად, როდესაც ბრაუზერის ჩანართი არააქტიურია, ბრაუზერის ფანჯარა მინიმუმამდეა დაყვანილი და ა.შ.).

ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

გთხოვთ, გაითვალისწინოთ, რომ ჩასმული კარუსელები არ არის მხარდაჭერილი და კარუსელები, როგორც წესი, არ შეესაბამება ხელმისაწვდომობის სტანდარტებს.

მაგალითი

კარუსელები ავტომატურად არ ახდენს სლაიდების ზომების ნორმალიზებას. როგორც ასეთი, შეიძლება დაგჭირდეთ დამატებითი უტილიტების ან მორგებული სტილის გამოყენება შინაარსის შესაბამისი ზომისთვის. მიუხედავად იმისა, რომ კარუსელები მხარს უჭერენ წინა/შემდეგ კონტროლს და ინდიკატორებს, ისინი აშკარად არ არის საჭირო. დაამატეთ და შეცვალეთ თქვენი შეხედულებისამებრ.

.activeკლასი უნდა დაემატოს ერთ-ერთ სლაიდს, წინააღმდეგ შემთხვევაში კარუსელი არ გამოჩნდება. idასევე, დარწმუნდით, რომ დააყენეთ უნიკალური .carouselარჩევითი კონტროლისთვის, განსაკუთრებით თუ იყენებთ რამდენიმე კარუსელს ერთ გვერდზე. საკონტროლო და ინდიკატორი ელემენტებს უნდა ჰქონდეს data-bs-targetატრიბუტი (ან hrefბმულებისთვის), რომელიც ემთხვევა idელემენტის ატრიბუტს .carousel.

მხოლოდ სლაიდები

აქ არის კარუსელი მხოლოდ სლაიდებით. გაითვალისწინეთ კარუსელის სურათების არსებობა .d-blockდა .w-100ბრაუზერის ნაგულისხმევი სურათების გასწორების თავიდან ასაცილებლად.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

კონტროლით

წინა და შემდეგი კონტროლის დამატება. ჩვენ გირჩევთ გამოიყენოთ <button>ელემენტები, მაგრამ ასევე შეგიძლიათ გამოიყენოთ <a>ელემენტები role="button".

<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ინდიკატორებით

თქვენ ასევე შეგიძლიათ დაამატოთ ინდიკატორები კარუსელში, კონტროლერებთან ერთად.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

წარწერებით

დაამატეთ სუბტიტრები თქვენს სლაიდებს მარტივად .carousel-captionნებისმიერი ელემენტის ფარგლებში .carousel-item. მათი ადვილად დამალვა შესაძლებელია მცირე ხედის პორტებზე, როგორც ეს ნაჩვენებია ქვემოთ, არჩევითი დისპლეის კომუნალური საშუალებებით . ჩვენ მათ თავდაპირველად ვმალავთ .d-noneდა ვაბრუნებთ საშუალო ზომის მოწყობილობებზე .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Crossfade

დაამატეთ .carousel-fadeთქვენს კარუსელში სლაიდების ანიმაციისთვის სლაიდის ნაცვლად გაცვეთილი გადასვლით.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

დაამატეთ data-bs-interval=""a- .carousel-itemში, რათა შეცვალოთ დროის დაყოვნება ველოსიპედის ავტომატურად გადაადგილებას შორის შემდეგ ელემენტზე.

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

გამორთეთ შეხებით გადაფურცვლა

კარუსელები მხარს უჭერენ სენსორულ მოწყობილობებზე მარცხნივ/მარჯვნივ გადაფურცვლას სლაიდებს შორის გადაადგილებისთვის. ეს შეიძლება გამორთოთ data-bs-touchატრიბუტის გამოყენებით. ქვემოთ მოყვანილი მაგალითი ასევე არ შეიცავს data-bs-rideატრიბუტს და აქვს data-bs-interval="false"ამიტომ ის ავტომატურად არ ითამაშებს.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

მუქი ვარიანტი

დაამატეთ .carousel-darkუფრო .carouselმუქი კონტროლისთვის, ინდიკატორებისა და წარწერებისთვის. საკონტროლო პუნქტები ინვერსიულია მათი ნაგულისხმევი თეთრი შევსებიდან filterCSS თვისებით. სუბტიტრებსა და კონტროლს აქვს დამატებითი Sass ცვლადები, რომლებიც ახდენენ colorდა background-color.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

მორგებული გადასვლა

გადასვლის ხანგრძლივობა .carousel-itemშეიძლება შეიცვალოს $carousel-transition-durationSass ცვლადით კომპილაციამდე ან მორგებული სტილები, თუ თქვენ იყენებთ შედგენილ CSS-ს. თუ გამოყენებულია მრავალი გადასვლები, დარწმუნდით, რომ ტრანსფორმაციის გარდამავალი პირველია განსაზღვრული (მაგ. transition: transform 2s ease, opacity .5s ease-out).

სას

ცვლადები

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-bs-slideიღებს საკვანძო სიტყვებს prevან next, რომელიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ალტერნატიულად, გამოიყენეთ data-bs-slide-toნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-bs-slide-to="2", რომელიც ცვლის სლაიდის პოზიციას კონკრეტულ ინდექსზე დაწყებული 0.

ატრიბუტი გამოიყენება კარუსელის აღსანიშნავად data-bs-ride="carousel", როგორც ანიმაციური გვერდის ჩატვირთვისას. თუ არ იყენებთ data-bs-ride="carousel"კარუსელის ინიციალიზაციას, თქვენ თავად უნდა მოაწყოთ იგი. მისი გამოყენება შეუძლებელია იმავე კარუსელის (ზედმეტად და არასაჭირო) აშკარა JavaScript ინიციალიზაციასთან ერთად.

JavaScript-ის საშუალებით

კარუსელის ხელით გამოძახება:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-, როგორც data-bs-interval="".

სახელი ტიპი ნაგულისხმევი აღწერა
interval ნომერი 5000 დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის. თუ false, კარუსელი ავტომატურად არ დატრიალდება.
keyboard ლოგიკური true უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე.
pause სიმებიანი | ლოგიკური 'hover'

თუ დაყენებულია 'hover', აჩერებს კარუსელის mouseenterველოსიპედს და განაახლებს კარუსელის ველოსიპედის ჩართვას mouseleave. თუ დაყენებულია false-ზე, კარუსელზე გადახვევა არ შეაჩერებს მას.

შეხებით ჩართულ მოწყობილობებზე, როდესაც დაყენებულია ველზე 'hover', ველოსიპედით მოძრაობა შეჩერდება touchend(როდესაც მომხმარებელი დაასრულებს კარუსელთან ინტერაქციას) ორი ინტერვალით, სანამ ავტომატურად განახლდება. გაითვალისწინეთ, რომ ეს არის თაგვის ზემოაღნიშნული ქცევის გარდა.

ride სიმებიანი | ლოგიკური false ავტომატურად უკრავს კარუსელს მას შემდეგ, რაც მომხმარებელი ხელით გადააბრუნებს პირველ ელემენტს. თუ დაყენებულია 'carousel'ზე, ავტომატურად უკრავს კარუსელს ჩატვირთვისას.
wrap ლოგიკური true უნდა მოძრაობდეს თუ არა კარუსელი განუწყვეტლივ თუ რთული გაჩერებები.
touch ლოგიკური true მხარდაჭერილი უნდა იყოს თუ არა კარუსელმა მარცხნივ/მარჯვნივ გადაფურცვლა სენსორულ მოწყობილობებზე.

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

თქვენ შეგიძლიათ შექმნათ კარუსელის მაგალითი კარუსელის კონსტრუქტორით, მაგალითად, დამატებითი ოფციების ინიციალიზაციისთვის და ველოსიპედით გადაადგილების დასაწყებად:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
მეთოდი აღწერა
cycle მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.
pause აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.
prev ციკლები წინა პუნქტამდე. უბრუნდება აბონენტს წინა ელემენტის ჩვენებამდე (მაგ., slid.bs.carouselმოვლენის დადგომამდე).
next ციკლები შემდეგ პუნქტზე. უბრუნდება აბონენტს შემდეგი ელემენტის ჩვენებამდე (მაგ., slid.bs.carouselმოვლენის დადგომამდე).
nextWhenVisible არ გადაიტანოთ კარუსელი შემდეგზე, როცა გვერდი არ ჩანს ან კარუსელი ან მისი მშობელი არ ჩანს. უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე
to აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი). უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე (მაგ., slid.bs.carouselმოვლენის დაწყებამდე).
dispose ანადგურებს ელემენტის კარუსელს. (შლის DOM ელემენტზე შენახულ მონაცემებს)
getInstance სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული კარუსელის მაგალითი, შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Carousel.getInstance(element)
getOrCreateInstance სტატიკური მეთოდი, რომელიც აბრუნებს კარუსელის მაგალითს, რომელიც ასოცირდება DOM ელემენტთან, ან ქმნის ახალს, თუ ის არ იყო ინიციალიზებული. თქვენ შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Carousel.getOrCreateInstance(element)

Ივენთი

Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად. ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:

  • direction: მიმართულება, რომლითაც სრიალებს კარუსელი (ან "left"ან "right").
  • relatedTarget: DOM ელემენტი, რომელიც სრიალდება ადგილზე, როგორც აქტიური ელემენტი.
  • from: მიმდინარე ელემენტის ინდექსი
  • to: შემდეგი ელემენტის ინდექსი

კარუსელის ყველა ღონისძიება ის��ოლება თავად კარუსელზე (ანუ ზე <div class="carousel">).

ღონისძიების ტიპი აღწერა
slide.bs.carousel მაშინვე ირთვება slideინსტანციის მეთოდის გამოძახებისას.
slid.bs.carousel გასროლა, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას.
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})