New: Independent OA Carousel

An Online-Access lightweight custom carousel that allows page size breakpoints among other custom options.

<link rel="stylesheet" href="/js/widgets/OAcarousel/default.min.css"> <div id="OAslider"> <div class="OAsliderTrack"> <ul class="OAslideHolder"> <li class="OAslide"></li> <li class="OAslide"></li> </ul> </div> <div class="OAsliderNav"> <span class="OAsliderLeft">‹</span> <span class="OAsliderRight">›</span> </div> </div> <script src="/js/widgets/OAcarousel/intScript.min.js" ></script> <script > $('#OAslider').sliderInit({ maxSlides: 1, //max number of slides shown at once slideAnimationSpeed: 300, //must be an int indicating number of ms autoSlide: 'right', //'right' 'left' or 'disable' autoSlideSpeed: 5000, //must be an int indicating number of ms breakPoint: null, //can be array of the screen sizes the number of slides at once are supposed to decrease ex: [1000,600] pagination: false //true to add pagination icons below (such in the example) }); </script>

Above is the html needed to start the carousel, with default options

In the initialization script, none of the options are necessary, it could be started as such:

<script >$('#OAslider').sliderInit({});</script>

However, there are options to customize it, the first copyable example has all the custom options at their default settings (so if you don't input any of the options, it'll be like that as well, like the above example)

Here are the options below:

maxSlides

default: 1

This is the maximum number of slides to be displayed at once in the carousel. Input must be a whole number (integer).

breakPoint

default: null

If the number of maxSlides is more than 1, this is the screen's pixel width at which the number of slides will drop down at one, to work with responsive design. If null, it wont shrink the number of slides at once responsively. Either enter a single integer for the pixel width you want it at (example: breakPoint: 900, ...) or do an array of multiple integers for each descending screen size you want the slide at once count to drop at (example: breakPoint: [1000,700,400], ...)

slideAnimationSpeed

default: 300

The speed of the animation of the slide movement, in ms (1/1000 of a second). Input must be a whole number (integer).

autoSlide

default: 'right'

Choose if you want the carousel to automatically slide when not hovered over. Options are 'right' to have it auto slide right, 'left' to have it auto slide left, or 'disable' to not have it automatically slide

autoSlideSpeed

default: 5000

If the autoSlide is enabled, this determines the time between each slide movement in ms (1/1000 of a second). Input must be a whole number (integer).

pagination

default: false

If you want pagination to display (the dots/dashes/icons) below the slider, set this parameter to be true (no quotes), and it will add them to the carousel such as the example (otherwise leave it false, or do not set the parameter).

Other customizations

Since, like the review widget, this targets a div with a specific Id, you can have multiple instances of a slider on a page (the review widget uses this slider) so when styling a slider, it's recommended to have the id, then whatever element inside targeted when doing css. (example: #OAslider .OAslide{ padding: 1rem; })

The other elements, not just the surrounding div are required such as the initial html provided. This means you can customize the next and previous icons if desired.