Multislider

A responsive, jQuery powered, multi-slideshow.

Download

Single Slide

Item
1

Item
2

Item
3

Item
4

Item
5

Item
6

Item
7

Item
8

Item
9

Item
10

All Slide

Item
1

Item
2

Item
3

Item
4

Item
5

Item
6

Item
7

Item
8

Item
9

Item
10

Continuous

Item
1

Item
2

Item
3

Item
4

Item
5

Item
6

Item
7

Item
8

Item
9

Item
10

About

Multislider is a jQuery powered slideshow that specializes in showing more than one slide at a time. There's no need to find messy CSS and JS work arounds for other single-slide solutions. Multislider allows the developer to focus fully on each individual slide as it's own component, and then displays as many slides as you decide in a manner that is fluid, consistent, and dymanic.

*Requires jQuery

Markup

The slideshow has just four components:

1 Main Wrapper A basic html wrapper element. Helps prevent overlap of other elements, and positioning internal slideshow elements. When given an id, slideshow styles can easily begin from this point and manage the entire multislider. In the examples above, this is shown with a black border.
2 Content Area This is the area that displays the slides. It determines the size of the slides, and can allow for space on either side for navigation arrows. Represented by the red border in the examples above.
3 Individual Slides Each slide is a simple <div class="item"></div>, and comes with a default style position: relative; The developer can then add any custom content, and easily position it within each slide. Shown with a green border in examples above.
4 Navigation This pluggin looks for navigation buttons, specified with the class ".MS-right" and ".MS-left". The above examples use FontAwesome icons for the left/right arrows.

Example:

<div id="exampleSlider">      <!-- Give wrapper ID to target with jQuery & CSS -->
    <div class="MS-content">
        <div class="item"> Item 1 </div>
        <div class="item"> Item 2 </div>
        <div class="item"> Item 3 </div>
    </div>
    <div class="MS-controls">
        <button class="MS-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
        <button class="MS-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
    </div>
</div>

CSS

The number of visible slides is controlled through CSS. Slides only show up in the content area, so simply divide the full width (100%) by the number of slides you want to show. For example:

.item { width: 20%; }
.item { width: 33.333%; }
.item { width: 50%; }

Below are CSS and LESS examples. Some styles are required, while others are just reccomended.

#exampleSlider {
    position: relative;      /* recommended */
}
#exampleSlider .MS-content {
    white-space: nowrap;     /* required */
    overflow: hidden;        /* required */
    margin: 0 5%;            /* makes room for L/R arrows */
}
#exampleSlider .MS-content .item {
    display: inline-block;   /* required */
    width: 20%;              /* required * Determines number of visible slides */
    position: relative;      /* required */
    vertical-align: top;     /* required */
    overflow: hidden;        /* required */
    height: 100%;            /* recommended */
    white-space: normal;     /* recommended */
}
#exampleSlider .MS-controls button {
    position: absolute;      /* recommended */
    top: 35px;
}
#exampleSlider .MS-controls .MS-left {
    left: 10px;
}
#exampleSlider .MS-controls .MS-right {
    right: 10px;
}
#exampleSlider {
    position: relative;

    .MS-content {
        white-space: nowrap;  /* required */
        overflow: hidden;     /* required */
        margin: 0 5%;         /* makes room for L/R arrows */

        .item {
            display: inline-block; /* required */
            position: relative;    /* required */
            vertical-align: top;   /* required */
            overflow: hidden;      /* recommended */
            height: 100%;          /* recommended */
            white-space: normal;   /* recommended */
            width: 20%;            /* show 5 slides */

            @media (max-width: 1200px) { width: 25%; };    /* show 4 slides */
            @media (max-width: 992px) { width: 33.333%; }; /* show 3 slides */
            @media (max-width: 768px) { width: 50%; };     /* show 2 slides */
        }
    }

    .MS-controls {
        button {
            position: absolute;
            top: 35px;
        }
        .MS-left {
            left: 10px;
        }
        .MS-right {
            right: 10px;
        }
    }
}

jQuery

Multislider is powered by jQuery, so if you're not including it on your site, then... you need to.
You can get a copy from the official jQuery site, or from Google.

<!-- Include jQuery, then include Multislider script -->
<script src="../path-to/jquery.min.js"></script>
<script src="../path-to/multislider.min.js"></script>

<!-- Initialize the plugin -->
$('#exampleSlider').multislider();

<!-- Initialize with options, if needed -->
$('#exampleSlider').multislider({
    interval:5000,
    slideAll:true
});

Options

Multislider accepts an options object when it is initalized. Here you can customize the way you'd like the multslider to function. A full list of values and their defaults is shown below.

Name Type Default Description
continuous boolean false When marked as true, the multislider will scroll left at a constant speed without stopping. This action is similar to a classic marquee scrolling effect. Because the multislider is in a constant state of animation, left and right arrows will not function unless the multislider is first paused.
slideAll boolean false Determines if default animation should move only one slide, or if it should move all visible items.
interval number 2000 The amount of time between each automatic animation event. If set to 0 or false, the multislider will only scroll when a navigation button is clicked.
duration number 500 The amount of time that it takes to complete each slide animation. Larger numbers equate to slower animations.
hoverPause boolen true Whether or not the multislider should prevent auto-animations when the cursor hovers the content area. If the multislider is currently animating when the content area is hovered, the current animation will finish, but future animations will be prevented as long as the cursor remains hovered. Hovering does not reset the interval timer.
pauseAbove Number null The multislider will prevent all auto-animations when screen width is above this number.
pauseBelow Number null The multislider will prevent all auto-animations when the screen width is below this number.

Methods

Methods can be called any time after the initialization. They return the object, or DOM element that was initally passed to them.

.multislider('pause') Prevents auto-animations. Does not stop or diasble interval timer, and allows animations triggered by other methods, or by user input.
.multislider('unPause') Unpauses a paused slideshow. Does NOT start auto-animations if they were not intialized.
.multislider('next') Multislider scrolls one slide to the right, even if the slideshow's auto-animations are paused.
.multislider('nextAll') Multislider scrolls all visible slides out of view the left, and scrolls into view the same number of subsquent slides. Works on a paused slideshow.
.multislider('prev') Multislider scrolls one slide to the left, even if the slideshow's auto-animations are paused.
.multislider('prevAll') Multislider scrolls all visible slides out of view the right, and scrolls into view the same number of previous slides. Works on a paused slideshow.
.multislider('continuous') If multislider is not currently using an auto-animation timer (interval), or is paused, then this will trigger a continuous sliding effect. Continuous slideshows can be paused, and reactived with this method.

Events

All events are fired from the Multislider Wrapper level (the DOM element that was selected on initialization), and bubble up through the rest of the DOM.

ms.before.animate Fires immediately before the animation occurs
ms.after.animate Fires immediately after the animation ends
Example:
$('#exampleSlider').on('ms.after.animate', function(){ /* do_something */ });

Examples

Tractor Tips

Read our awesome tractor tips!! Fap humblebrag post-ironic tacos etsy bushwick, poke bitters vice. Ramps truffaut chia pinterest intelligentsia...

Read More

Sexy RV Dates

Your RV has never been so romantic! Brooklyn kale chips knausgaard succulents fap chartreuse fashion axe iceland. Hoodie pok pok pop-up subway tile...

Read More

The Ride

Motorcyles are dope AF. Get one! Ironic brooklyn kale chips knausgaard succulents fap chartreuse fashion axe iceland. Hoodie pok pop meggings...

Read More

Family Trip

Family trips are boring. Salvia echo park raclette, knausgaard la croix meh +1 street art mlkshk fashion axe. Enamel pin disrupt...

Read More

Winter Driving

Ice-road truckers are tough dudes! Selvage umami vexillologist shoreditch. Hell of hashtag hoodie affogato forage vegan yr. Gochujang ugh listicle...

Read More

Beach Safety

Jet skis are fun! Skateboard raw denim vexillologist tumblr hammock, knausgaard poke cray dreamcatcher mumblecore fashion axe cred shabby chic butcher actually. Shoreditch readymade...

Read More

Customer Reviews

These guys rock!!

A bunch of cool things about this company and stuff! Trust fund snackwave la croix, blue bottle pok pok wayfarers you probably haven't heard of them. Four loko distillery freegan enamel pin iceland, vinyl cliche ramps af!

John Johnson | Flattown, OH

Worth Every Penny!

I spent a fortune here, and I'm glad I did! Man braid flexitarian cliche, narwhal whatever YOLO fam ramps sustainable banjo chartreuse fanny pack sartorial typewriter. Iceland gochujang whatever, beard four dollar toast heirloom pabst bushwick pitchfork vexillologist.

Danielle Perfer| Shortsville, CA

Highly Recommended!

Since the moment I signed on, I have been nothing but pleased! Swag blue bottle portland, raw denim godard disrupt jianbing vape shabby chic VHS narwhal. Craft beer tacos salvia, freegan tumeric kombucha cronut tote bag brunch vape.

Timothy McCook | Porter, PA

Will do Business With Again!

I sign up all of my forty thousand companies for this dope AF service! Post-ironic af craft beer pour-over. Messenger bag unicorn tote bag man braid, pug typewriter normcore. Yr af occupy actually. 8-bit kitsch poutine gastropub, copper mug actually photo booth.

Fanny Buttlicker | Georgetown, NV