{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>The Slider component is a slide show that displays many components of the content horizontally on the page.\nThe Slider are independent of each other and there is no logical relationship between content and data.</p>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<ul>\n<li><strong>single picture</strong>&#xFF1A;This style is usually used to carry operational banners. It is a relatively fixed module.</li>\n<li><strong>multiple picture</strong>&#xFF1A;browse multiple unit message</li>\n</ul>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ol>\n<li>When there is only one picture in the Slider component, it will hides the navigation anchor, disables automatic cycling (even if the upper layer is set), and prohibits drag and drop playback (even if the upper layer is set).</li>\n<li>If you want to put the Slider into the Dialog, you need to close the Dialog animation at this time, to avoid the Slider causing an error when calculating the inner element width.</li>\n<li>If there is a 1px image height problem, try wrapping a <code>div</code> tag outside the <code>img</code> tag.</li>\n</ol>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Slider\">Slider <a class=\"header-anchor scroll-count-item\" href=\"#Slider\" data-scroll-id=\"Slider\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>adaptiveHeight</td>\n<td>Whether to use adaptive height</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Animation type, default value is &apos;slide&apos;</td>\n<td>string | boolean</td>\n<td>&apos;slide&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>arrows</td>\n<td>Whether to display arrows</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>arrowSize</td>\n<td>Size of the arrow</td>\n<td>&apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>arrowPosition</td>\n<td>Position of the arrow</td>\n<td>&apos;inner&apos; | &apos;outer&apos;</td>\n<td>&apos;inner&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>arrowDirection</td>\n<td>Direction of the arrow</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>&apos;hoz&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>autoplay</td>\n<td>Whether to play automatically</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>autoplaySpeed</td>\n<td>Autoplay speed</td>\n<td>number</td>\n<td>3000</td>\n<td></td>\n</tr>\n<tr>\n<td>prevArrow</td>\n<td>Prev arrow</td>\n<td>ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>nextArrow</td>\n<td>Next arrow</td>\n<td>ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>centerMode</td>\n<td>Whether to use center mode</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>dots</td>\n<td>Whether to display dots</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>dotsDirection</td>\n<td>Direction for navigation dots</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>&apos;hoz&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>dotsRender</td>\n<td>Render navigation dots<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>index</em>: index<br><em>current</em>: current</td>\n<td>(index: number, current: number) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>draggable</td>\n<td>Whether it can be dragged</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>infinite</td>\n<td>Whether to use infinite loop mode</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultActiveIndex</td>\n<td>The default activated slide index</td>\n<td>number</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>lazyLoad</td>\n<td>Whether to enable lazy load</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>slideDirection</td>\n<td>Slide direction</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>&apos;hoz&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>slidesToShow</td>\n<td>Number of slides showed at the same time</td>\n<td>number</td>\n<td>1</td>\n<td></td>\n</tr>\n<tr>\n<td>slidesToScroll</td>\n<td>Number of slides scrolled at the same time</td>\n<td>number</td>\n<td>1</td>\n<td></td>\n</tr>\n<tr>\n<td>speed</td>\n<td>Carousel speed</td>\n<td>number</td>\n<td>600</td>\n<td></td>\n</tr>\n<tr>\n<td>activeIndex</td>\n<td>Jump to the specified carousel image (controlled)</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Triggering method for navigation dots</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback function for slides switching</td>\n<td>(index: number) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>centerPadding</td>\n<td>Side padding when in center mode (px or %);</td>\n<td>string</td>\n<td>&apos;50px&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>cssEase</td>\n<td>CSS3 Animation Easing, default value is &apos;ease&apos;</td>\n<td>string</td>\n<td>&apos;ease&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>focusOnSelect</td>\n<td>When multiple slides are rotated, whether to be automatically centered after clicking to select them.</td>\n<td>boolean</td>\n<td>&apos;false&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom style</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>waitForAnimate</td>\n<td>Whether to wait for the animation to end before executing the action</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>accessibility</td>\n<td>Whether to enable accessibility support, using the left and right keys to switch the carousel image</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dotsClass</td>\n<td>Dots class name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>variableWidth</td>\n<td>By default, Slider considers all child elements to be equal. By setting <code>variableWidth</code> to <code>true</code>, you can place images of different widths in the Slider.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onBeforeChange</td>\n<td>Callback function before slides switching</td>\n<td>(index: number, currentIndex?: number) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>swipe</td>\n<td>Whether to use swipe</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>edgeEvent</td>\n<td>Callback function triggered when sliding to the edge</td>\n<td>(swipeDirection: &apos;left&apos; | &apos;right&apos;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>edgeFriction</td>\n<td>Edge friction coefficient, the larger the number, the slower the sliding</td>\n<td>number</td>\n<td>0.35</td>\n<td></td>\n</tr>\n<tr>\n<td>swipeEvent</td>\n<td>Callback function for swipe events</td>\n<td>(swipeDirection: &apos;left&apos; | &apos;right&apos; | &apos;vertical&apos; | &apos;down&apos; | &apos;up&apos;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>pauseOnHover</td>\n<td>Whether to stop the carousel automatically when the mouse hovers</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Other\">Other <a class=\"header-anchor scroll-count-item\" href=\"#Other\" data-scroll-id=\"Other\">#</a></h2>\n<p>next-slider is forked from <a href=\"https://github.com/akiran/react-slick\">react-slick</a></p>\n"}