>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3254526. --> Reported by: [adriancid](https://www.drupal.org/user/1962106) Related to !12 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>We&rsquo;ll need to support multiple instances of the slider per page that may require different settings. For instance some sliders may have different slidesToShow values and some may have different arrow or dots settings, but they will coexist on the same page together.</p> <p>I have vetted available settings and laid out how each should behave here in the admin form as well as the template.</p> <p>slidesToShow</p> <p>Form element: select</p> <p>Values: auto, 1-10</p> <p>Default: 1</p> <p>Form behavior: If auto is selected, then the itemWidth and exactWidth options should display.</p> <p>slidesToScroll</p> <p>Form element: select</p> <p>Default: 1</p> <p>Values: auto, 1-10</p> <p>arrows</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: true</p> <p>Template behavior: value should be passed to Twig so that the arrows markup can be conditionally rendered based on this value.</p> <p>dots</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: false</p> <p>Template behavior: value should be passed to Twig so that the dots markup can be conditionally rendered based on this value.</p> <p>itemWidth</p> <p>Form element: number input</p> <p>Values: 1-9999</p> <p>Form behavior: should only appear if slidesToShow value is set to &ldquo;auto&rdquo;</p> <p>exactWidth</p> <p>Form element: number input</p> <p>Values: 1-9999</p> <p>Form behavior: should only appear if slidesToShow value is set to &ldquo;auto&rdquo;</p> <p>scrollLock</p> <p>Form element: checkbox</p> <p>Value: true/false</p> <p>Form behavior: when checked, display scrollLockDelay</p> <p>scrollLockDelay</p> <p>Form element: number input</p> <p>Value: 1-99999</p> <p>Default: 250</p> <p>Form behavior: should only appear if scrollLock is checked</p> <p>resizeLock</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: true</p> <p>responsive</p> <p>This should be a multi-select that reads the theme breakpoints and adds new forms with all of these settings when each breakpoint is selected.</p> <p>rewind</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: false</p> <p>draggable</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Defaultl: false</p> <p>Form behavior: when this is checked, display dragVelocity settings</p> <p>dragVelocity</p> <p>Form element: number input with step 0.1</p> <p>Values: 1-10</p> <p>Default: 3.3</p> <p>Form behavior: should only appear if draggable is checked</p> <p>duration</p> <p>Form element: number input with step of 0.1</p> <p>Values: 0-1</p> <p>Default: 0.5</p> <p>We can either omit the following settings, or hide them by default in some kind of dropdown.</p> <p>scrollPropogate</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: false</p> <p>eventPropagate</p> <p>Form element: checkox</p> <p>Values: true/false</p> <p>Default: true</p> <p>skipTrack</p> <p>Form element: checkbox</p> <p>Values: true/false</p> <p>Default: false</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>