Instamagic Slider

The Instamagic slider is a great way to display your Instagram photos by grouping them together by tags, applying stylish filters & experimenting with layouts.

Basic Setup

<div class="im-slider"
    data-im-slider-navigation = "false"
    data-im-slider-pagination = "true"
    data-im-slider-autoplay = "true"
    data-im-slider-items = "4"
    data-im-number-of-images = "12"
    data-im-filter = "toaster"
    data-im-tags = "landscape">
</div>

Add the
```
im-slider
```
class to a div. There are a few data-properties specifically for the slider. First is the
```
data-im-slider-navigation
```
property. If set to
```
true
```
'next' and 'back' buttons will be displayed with the slider. See demo below for an example.
```
data-im-slider-pagination
```
if set to false will hide the slider pagination. Set
```
data-im-slider-autoplay
```
to
```
true
```
to start the slider automatically. Lastly
```
data-im-slider-items
```
sets the number of images visible at any one time. The sliders are responsive so this setting will be overridden on smaller devices like mobile phones.

Everything else has default settings (check out the options at the bottom of the page). You can add each slider to its own lightbox group. Or have one group for all sliders. You can read more about the lightbox here.

Multiple Sliders: with lightbox groups, navigation, pagination, autoplay and more

data-im-slider-navigation = "true"
data-im-slider-pagination = "false"
data-im-slider-autoplay = "false"
data-im-slider-items = "6"
data-im-number-of-images = "12"
data-im-filter = "blend-pink-yellow-dark"

data-im-slider-navigation = "true"
data-im-slider-pagination = "false"
data-im-slider-autoplay = "true"
data-im-slider-items = "6"
data-im-number-of-images = "12"
data-im-filter = "blend-blue-yellow-light"

Here we have two sliders. One with the Add the
```
data-im-slider-navigation
```
set to
```
true
```
. This shows navigation buttons below the slider instead of the default pagination. Each demonstrate how you can use the
```
data-im-filter-*
```
property to add cool filter effects to your images. This also has the
```
data-im-slider-autoplay
```
property set to
```
false
```
.

Using filters and hover effects with a slider

<div class="im-slider"
    data-im-slider-pagination = "true"
    data-im-slider-autoplay = "true"
    data-im-slider-items = "4"
    data-im-number-of-images = "12"
    data-im-filter = "clarendon"
    data-im-lightbox = "true"
    data-im-lightbox-group = "slider-3"
    data-im-hover = "shutter-in-out-horiz"
    data-im-show-caption =	"true"
    data-im-show-date = "true"
    data-im-show-likes = "true"
    data-im-tags = "landscape, people, animals">
</div>

Here's a slider with a combination of filter effects (
```
data-im-filter = "clarendon"
```
), hover effects (
```
data-im-hover = "shutter-in-out-horiz"
```
) and lightbox functionality. Piece of cake right?

You can read more about the lightbox, filter effects and hover effects right here. For all configuration options check out the list below.

Options:

Data property	Type	Default	Options	Description
data-im-lightbox	bool	false	true, false	Use this if you want your Instagram images in a popup lightbox. Use with im-lightbox-group to group images in to different lightboxes.
data-im-lightbox-group	string	gallery-img	none	Set a unique name for each lightbox group. Use with im-lightbox
data-im-img-res	string	medium	low, medium, high	Set the resolution for your Instagram images. Use low res for large galleries to speed page loading time.
data-im-number-of-images	int	20	1-20	Set the number of images to fit page size or for different layouts.
data-im-slider-navigation	bool	false	true, false	Add navigation buttons to the carousel.
data-im-slider-pagination	bool	true	true, false	Add pagination to the carousel.
data-im-slider-autoplay	bool	false	true, false	Start the slider when the page loads.
data-im-show-caption	bool	false	true, false	Show the Instagram caption on each image.
data-im-show-date	bool	false	true, false	Show the Instagram date on each image.
data-im-show-location	bool	false	true, false	Show the Instagram location on each image.
data-im-show-likes	bool	false	true, false	Show the Instagram likes on each image.
data-im-show-filter	bool	false	true, false	Show the Instagram filter used on each image.
data-im-show-username	bool	false	true, false	Show the Instagram username on each image.
data-im-filter	string	none		Add filter effects to spice up your images. Combine with data-im-hover for some cool hover effects.
data-im-hover	string	none		Use this to add some cool hover effects. Use in conjunction with data-im-filter .

Instamagic Slider

The Instamagic slider is a great way to display your Instagram photos by grouping them together by tags, applying stylish filters & experimenting with layouts.

Basic Setup

Multiple Sliders: with lightbox groups, navigation, pagination, autoplay and more

Using filters and hover effects with a slider

Options:

And there's more...

Check out even more cool demos and tutorials with tons of more features