DealerOn Slider no dependencies

Live preview

Preview at Card size — Cards shown — Gap — Stops — Shows — Room to spare —

1 Write your slides — the headings, links and photos that go in the slider

2 Copy each part into its own field — the box below is the three of them together.

dos- is the slider, cargo- is the card design; both come from dealeron-slider.min.css.
Becomes the CSS class the settings hang off. A second slider on the same page needs a different name here, or the two overwrite each other.

    3 Add the files to the site — once, not per slider

    Two steps, once per site: put the four files in the shared folder, then link them from the page. The slider above is running the very files you would take.

    First, get the four files up there

    Four files, one folder. dealeron-slider.min.css and dealeron-slider.min.js are what the tags link; dealeron-slider.css and dealeron-slider.js are the same code unminified, for anyone opening the file to see what it does. Upload all four as they are.

    The browser asks “Download multiple files?” on the second one — allow it. Each saves under its own name.

    • dealeron-slider.css
    • dealeron-slider.js
    • dealeron-slider.min.css
    • dealeron-slider.min.js

    They go in /assets/shared/CustomHTMLFiles/Responsive/Apps/dealeronSlider/ — one folder, every site.

    Copy and View hand over the file, nothing more View reads it here; Copy puts the file itself on your clipboard, with no <style> or <script> wrapper — these are for reading one and moving one about, not for pasting the engine into a page. A page gets the engine by linking it.

    Then, add the two tags to the page

    Once per site, not once per slider — every page that links them shares one cached copy, and the stylesheet carries the card styling too, so a slider you copy from here is mostly just its markup. 

    <link rel="stylesheet" href="/assets/shared/CustomHTMLFiles/Responsive/Apps/dealeronSlider/dealeron-slider.min.css">
<script src="/assets/shared/CustomHTMLFiles/Responsive/Apps/dealeronSlider/dealeron-slider.min.js" defer></script>

    Where the tags go Both go in the Head Section tab — the one that takes HTML, not “Style Only, Head Section”, which takes raw CSS and would swallow a tag. The <script> can go in Body Section, Bottom instead if you prefer it there. If the slider comes out a plain vertical list, the tags are not resolving: open the .css address in a tab and check that it starts with .dos{.