diff --git a/site/content/docs/standard/components/carousel/a-ss.html b/site/content/docs/standard/components/carousel/a-ss.html new file mode 100644 index 000000000..cf05eb49c --- /dev/null +++ b/site/content/docs/standard/components/carousel/a-ss.html @@ -0,0 +1,8 @@ +--- +--- + +
  • Usage
    • +
  • Options
    • +
  • Classes
    • +
  • Methods
    • +
  • Events
    • diff --git a/site/content/docs/standard/components/carousel/a.html b/site/content/docs/standard/components/carousel/a.html new file mode 100644 index 000000000..53f7a8663 --- /dev/null +++ b/site/content/docs/standard/components/carousel/a.html @@ -0,0 +1,831 @@ +--- +--- + + +
    + +
    + +

    + Usage +

    + +

    Via data attributes

    + +

    + Use data attributes to easily control the position of the carousel. + data-te-slide accepts the keywords prev or + next, which alters the slide position relative to its current + position. Alternatively, use data-te-slide-to to pass a raw + slide index to the carousel data-te-slide-to="2", which + shifts the slide position to a particular index beginning with + 0. +

    + +

    + The data-te-carousel-init and + data-te-carousel-slide attributes are used to mark a carousel + as animating starting at page load. If you don’t use these attributes to + initialize your carousel, you have to initialize it yourself. + + It cannot be used in combination with (redundant and unnecessary) + explicit JavaScript initialization of the same carousel. + +

    + + + {{< twsnippet/no-demo id="api-example1" >}} + + + +

    Via JavaScript

    + +

    Create a carousel with a single line of JavaScript:

    + + + {{< twsnippet/no-demo id="api-example2" >}} + + +
    + + +
    + + +
    + +

    + Options +

    + +

    + Options can be passed via data attributes or JavaScript. For data + attributes, append the option name to data-te-, as in + data-te-interval="4000". +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Type + + Default + Description
    + interval + + number + + 5000 + + The amount of time to delay between automatically cycling an + item. If false, carousel will not automatically cycle. +
    + keyboard + + boolean + + true + + Whether the carousel should react to keyboard events. +
    + pause + + string | boolean + + "hover" + +

    + If set to "hover", pauses the cycling of the + carousel on mouseenter and resumes the + cycling of the carousel on mouseleave. If set + to false, hovering over the carousel won't pause it. +

    +

    + On touch-enabled devices, when set to + "hover", cycling will pause on + touchend (once the user finished interacting + with the carousel) for two intervals, before automatically + resuming. Note that this is in addition to the above mouse + behavior. +

    +
    + slide + + string | boolean + + false + + Autoplays the carousel after the user manually cycles the + first item. If "carousel", autoplays the carousel on load. +
    + wrap + + boolean + + true + + Whether the carousel should cycle continuously or have hard + stops. +
    + touch + + boolean + + true + + Whether the carousel should support left/right swipe + interactions on touchscreen devices. +
    +
    +
    +
    +
    +
    + + +
    + +
    + +

    + Classes +

    + +

    + Custom classes can be passed via data attributes or JavaScript. For data + attributes, append the class name to + data-te-class, as in + data-te-class-pointer="touch-pan-x" (in default there is a + touch-pan-y). +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Default + Description
    + pointer + + touch-pan-y + + Sets styles for controlling a carousel element's behavior on + touchscreens. +
    + block + + !block + + Style the display of active carousel slide. +
    + visible + + data-[te-carousel-fade]:opacity-100 + data-[te-carousel-fade]:z-[1] + + Sets transition styles on carousel slides visible. +
    + invisible + + data-[te-carousel-fade]:z-0 + data-[te-carousel-fade]:opacity-0 + data-[te-carousel-fade]:duration-0 + data-[te-carousel-fade]:delay-600 + + Sets transition styles on carousel slides invisible. +
    + slideRight + + translate-x-full + + Utilities for translating a carousel element. +
    + slideLeft + + -translate-x-full + + Utilities for translating a carousel element. +
    +
    +
    +
    +
    +
    + + +
    + + +
    + +

    + Methods +

    + + + +

    + You can create a carousel instance with the carousel constructor, for + example, to initialize with additional options and start cycling through + items: +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Method + + Description + Example
    + cycle + + Cycles through the carousel items from left to right. + + myCarousel.cycle() +
    + pause + + Stops the carousel from cycling through items. + + myCarousel.pause() +
    + prev + + Cycles to the previous item. + + Returns to the caller before the previous item has been + shown + + (e.g., before the slid.te.carousel event occurs). + + myCarousel.prev() +
    + next + + Cycles to the next item. + + Returns to the caller before the next item has been shown + + (e.g., before the slid.te.carousel event occurs). + + myCarousel.next() +
    + nextWhenVisible + + Don’t cycle the carousel to next when the page isn’t visible + or the carousel or its parent isn’t visible. + + Returns to the caller before the next item has been shown + + (e.g., before the slid.te.carousel event occurs). + + myCarousel.nextWhenVisible() +
    + to + + Cycles the carousel to a particular frame (0 based, similar + to an array). + + Returns to the caller before the target item has been + shown + + (e.g., before the slid.te.carousel event occurs). + + myCarousel.to(0) +
    + dispose + + Destroys an element's carousel. + + myCarousel.dispose() +
    + getInstance + + Static method which allows you to get the carousel instance + associated with a DOM element. + + Carousel.getInstance() +
    + getOrCreateInstance + + Static method which allows you to get the carousel instance + associated with a DOM element or create a new one in case it + wasn't initialized. + + Carousel.getOrCreateInstance() +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example3" >}} + + + + +
    + + +
    + +

    + Events +

    + +

    + Bootstrap’s carousel class exposes two events for hooking into carousel + functionality. Both events have the following additional properties: +

    + +
      +
    • + direction: The direction in which the carousel is sliding + (either "left" or "right"). +
      • +
    • + relatedTarget: The DOM element that is being slid into + place as the active item. +
      • +
    • from: The index of the current item
      • +
    • to: The index of the next item
      • +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + +
    + Event type + Description
    + slide.te.carousel + + Fires immediately when the slide instance + method is invoked. +
    + slid.te.carousel + + Fired when the carousel has completed its slide + transition. +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example4" >}} + + + +
    +
    +