Slides Framework
Search…
⌃K

Components

For our slides and templates, we’ve provided a wide range of ready-to-use components you can modify for your projects.
Click anywhere outside the element to close the sidebar. When the sidebar is on the screen, it blocks the ability to change slides.
To make a sidebar appear in the viewport, add a class sidebarTrigger on any element element and data-sidebar-id="unique-id" for element AND a sidebar to link them together.
<button class="sidebarTrigger" data-sidebar-id="unique-id">Sidebar</button>
Here is the code for a simple sidebar:
<nav class="sidebar" data-sidebar-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<!-- content -->
</div>
</nav>
To close the sidebar, add the close class to any element. Or add the class data-sidebar-action="close" attribute to any element in the opened sidebar:
<nav class="sidebar" data-sidebar-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<div data-sidebar-action="close">Close</div>
</div>
</nav>
Sidebar appears on right by default; add a class left to move it to the left.
<nav class="sidebar left" data-sidebar-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<!-- content -->
</div>
</nav>
You can change the width and background of a sidebar:
<nav class="sidebar purple" style="width:300px" data-sidebar-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<!-- content -->
</div>
</nav>

Hide Sidebar on Click

You can prevent closing of the sidebar when the body is clicked by setting the following parameter after slides.js:
<script>
window.hideSidebarOnBodyClick = 0;
</script>

Animation

You can animate the contents of a sidebar by adding animated class on the sidebar element and ae-X for elements inside of it:
<nav class="sidebar animated" data-sidebar-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<h1 class="ae-1">I will appear first</h1>
<p class="ae-2">I will appear second</p>
<button class="ae-3">I will appear third</button>
</div>
</nav>
We’ve also created several different sidebar layouts you can choose from.
Popups display above everything else on the page. To trigger the appearance of a popup, add the class popupTrigger on any element you want and data-popup-id="unique-id" for the element AND a popup to link them together.
<button class="popupTrigger" data-popup-id="unique-id">Popup</button>
Use the code below to create popups:
<div class="popup" data-popup-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<!-- content -->
</div>
</div>
For popups with the content centered, use this code:
<div class="popup" data-popup-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<div class="container">
<div class="wrap">
<!-- content on the center of a screen -->
</div>
</div>
</div>
</div>
You can enable autoplay of Youtube and Vimeo videos embedded with iframe by adding a autoplay class on the popup element:
<div class="popup autoplay" data-popup-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-12-12">
<div class="embedVideo popupContent">
<iframe src="https://www.youtube.com/embed/x6rC97PuK5o?rel=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
You can create a slider with videos inside your popup and play video in the chosen slide. In this case you don't need to add autoplay class on the popup element, but you should add it to the each video inside your popup.
<ul class="popupTrigger controller" data-popup-id="unique-popup-id" data-slider-id="unique-slider-id">
<li class="selected"><a class="button blue">Slide 1</a></li>
<li><a class="button blue">Slide 2</a></li>
<li><a class="button blue">Slide 3</a></li>
</ul>
<div class="popup" data-popup-id="unique-popup-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-12-12">
<div class="popupContent">
<ul class="slider" data-slider-id="unique-slider-id">
<li class="selected">
<div class="embedVideo">
<iframe data-src="https://www.youtube.com/embed/wPKOPs63l0A" class="autoplay"></iframe>
</div>
</li>
<li>
<div class="embedVideo">
<iframe data-src="https://player.vimeo.com/video/198116920" class="autoplay"></iframe>
</div>
</li>
<li>
<div class="embedVideo">
<video class="wide autoplay" controls="">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.mp4" type="video/mp4">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.webm" type="video/webm">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.ogv" type="video/ogg">
</video>
</div>
</li>
</ul>
<div class="disableSelect">
<a class="button blue" data-slider-id="unique-slider-id" data-slider-action="prev">Back</a>
<a class="button blue" data-slider-id="unique-slider-id" data-slider-action="next">Next</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see this example in action here.
To close a popup, click on any element that includes the close class or by clicking on an element with the data-popup-action="close" class inside of the opened popup:
<div class="popup" data-popup-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content popupContent">
<div class="container">
<div class="wrap">
<a href="#hash" data-popup-action="close">Close and Link to a Slide</a>
</div>
</div>
</div>
</div>
Popups are used mainly to embed video content. By default, clicking on the empty or body area outside the video container will hide the video popup window. If you want to remove that ability, simply add a class popupContent on your content element:
<div class="popup" data-popup-id="unique-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content popupContent">
<div class="container">
<div class="wrap">
<!-- content on the center of a screen -->
</div>
</div>
</div>
</div>

Animate Popup

You can animate the contents of a popup by adding animated class on the popup element and ae-X for elements inside of it:
<div class="popup animated" data-popup-id="unique-id">
<div class="close ae-1 fromRight"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content popupContent">
<div class="container">
<div class="wrap">
<h1 class="ae-1">I will appear first</h1>
<p class="ae-2">I will appear second</p>
<button class="ae-3">I will appear third</button>
</div>
</div>
</div>
</div>
If your popup has a <form>...</form> tag in it, you can focus on any focusable element (<input>, <textarea></textarea>, <select>) inside this form. To do that, add data-popup-focus-input="unique-input-id" to your popupTrigger and set this unique-input-id to the element inside <form>...</form> you'd like to focus on.
<button class="popupTrigger" data-popup-id="popup-id" data-popup-focus-input="unique-input-id">Open popup and focus on input</button>
<div class="popup" data-popup-id="popup-id">
<div class="close"><svg><use href="assets/svg/icons.svg#close"></use></svg></div>
<div class="content">
<form action="" method="post" class="slides-form wide">
<input class="wide" type="text" name="name" placeholder="Your Name" id="unique-input-id">
<button type="submit" class="button wide green margin-top-2 cropBottom">Send</button>
</form>
</div>
</div>
View all examples of popup usage here.

Slider

The slider we’ve included in Slides allows you to change images on slides by clicking on simple navigation indicators. A sample of a working slider is here. It’s possible to have multiple sliders on your page, but be careful to add unique IDs to each one.
Here’s the code for a slider and controller:
<!-- slider -->
<ul class="slider" data-slider-id="unique-id">
<li class="selected"></li>
<li></li>
<li></li>
</ul>
<!-- controller -->
<ul class="controller" data-slider-id="unique-id">
<li class="dot selected"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
Add a class clickable on your slider element to change between various image elements on click.
You can use this slide as an example.

Arrows

You can add arrows to show next or previous element of the Slider:
<div data-slider-id="unique-id" data-slider-action="prev">Prev</div>
<div data-slider-id="unique-id" data-slider-action="next">Next</div>
Here is an example.

Display slide number

You can add total slides counter and display current slide number. Just add element with sliderCounter class and put in it element with class now for displaying current slide number and element with class total to show total number of slides:
<div class="sliderCounter" data-slider-id="unique-id">
<span class="now">1</span> / <span class="total">7</span>
</div>
Here is an example.

Swipeable

You can add a class swipeable on your slider element to swipe slides forward/backward with your touch screen or mouse.
Here is an example.

Autoplay

With the class autoplay on your slider element, your photos (or other elements) will advance in sequence automatically. The default slide-change interval is 5 seconds. Update the attribute data-slider-interval="5000" to change the default 5000 milliseconds interval time.
<ul class="slider autoplay" data-slider-interval="5000" data-slider-id="unique-id">
<li class="selected"></li>
<li></li>
<li></li>
</ul>

Autoplay video after changing slide

You can put a video inside your slider. If you will set autoplay class to the <iframe> or <video> tag this video will be played when it's parent slide will be opened.
<ul class="slider clickable" data-slider-id="unique-id">
<li class="selected">
<div class="embedVideo">
<iframe data-src="https://www.youtube.com/embed/wPKOPs63l0A" class="autoplay"></iframe>
</div>
</li>
<li>
<div class="embedVideo">
<video class="wide autoplay" controls="">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.mp4" type="video/mp4">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.webm" type="video/webm">
<source data-src="https://designmodo.com/wp-content/themes/designmodo/custom-pages/slides/presentation/video/preview.ogv" type="video/ogg">
</video>
</div>
</li>
</ul>
You can see it in action in this example.

AutoHeight

Add a autoHeight class on your slider element to manually set a correct height of the element each time you change the slider element. This way you can make a smooth animation between elements:
<ul class="slider autoHeight" data-slider-id="unique-id">
<li class="selected"></li>
<li></li>
<li></li>
</ul>
You can use this slide as an example.

Animated

You can animate the contents of a popup by adding animated class on the slider element and direction class for li elements inside of it:
<ul class="slider animated" data-slider-id="unique-id">
<li class="selected fadeIn"></li>
<li class="fromLeft"></li>
<li class="fromRight"></li>
</ul>
You can use this slide as an example.
You can place the Slides share dropdown anywhere on a page, but we’ve used it mainly on top and bottom panels to include share capabilities on all slides.
To request the appearance of a dropdown use class dropdownTrigger with data-dropdown-id="unique-id" on your button or link.
<button class="dropdownTrigger" data-dropdown-id="unique-id">Dropdown</button>
Here is the dropdown code:
<div class="dropdown" data-dropdown-id="unique-id">
<!-- content -->
</div>
Initially the dropdown in Slides is positioned in the top left corner. You can change where the dropdown is located by adding right, center and bottom classes on a dropdown element.
<div class="dropdown bottom right" data-dropdown-id="unique-id">
<!-- content -->
</div>
Initially the dropdown in Slides is revealed on click. You can change it to hover by adding hover class on the dropdownTrigger element.
<div class="dropdownTrigger hover" data-dropdown-id="unique-id">Show on hover</div>
<div class="dropdown bottom right" data-dropdown-id="unique-id">
<!-- content -->
</div>
We used the awesome Sharrre jQuery plugin to provide a suitable share window with a click. You can insert the text of your choice in your tweet with data-text="Place your message here". Add your URL with data-url="https://designmodo.com". For Pinterest, add your image with data-pinterest-image="http://path.to/your/image.jpg". For email's subject and body add data-subject="Subject" and data-body="Body" on mail element:
<div class="dropdown share bottom right" data-dropdown-id="unique-id" data-text="Take a look at this" data-url="https://designmodo.com" data-pinterest-image="https://designmodo.com/wp-content/uploads/2015/10/Presentation.jpg">
<div class="center padding-2">
<div class="title">Share</div>
<a href="#">Contact us</a>
</div>
<ul>
<li class="social-facebook"><svg><use href="assets/svg/icons.svg#fb-like"></use></svg></li>
<li class="social-twitter"><svg><use href="assets/svg/icons.svg#twitter"></use></svg></li>
<li class="social-googlePlus"><svg><use href="assets/svg/icons.svg#googlePlus"></use></svg></li>
<li class="social-linkedin"><svg><use href="assets/svg/icons.svg#linkedin"></use></svg></li>
<li class="mail" data-subject="Subject" data-body="Body">share by email</li>
</ul>
</div>

Dialog

You can use dialog messages on your Slides projects for things like notifying users of new features, accept cookies, invite them to subscribe or communicate with site visitors.
First of all, you need to add <div class="dialogContainer"></div> to your page. All of your dialog windows will be added to this div.
Below is the code for a simple dialog message.
<div class="dialogContainer">
<div class="dialog">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Your text message here.
</div>
</div>
</div>
</div>
If you want your dialog to be shown with the animation when the page loaded, just add hidden class and data-dialog-action="open" attribute to a div with a dialog class

Position

You can change the position of the dialog message by adding left and/or bottom classes to the dialogContainer element.
<div class="dialogContainer left bottom">
<div class="dialog">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Your text message here.
</div>
</div>
</div>
</div>

Buttons

You have the option of adding up to three buttons to the bottom of your Dialog message. These buttons can have internal or external links, dialog actions or even an email form.
<div class="dialogContainer">
<!-- Dialog /w Buttons -->
<div class="dialog">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Your text message here.
</div>
</div>
<ul>
<li class="toSlide-5">Internal</li>
<li data-href="https://designmodo.com/">Redirect</li>
<li data-href="https://designmodo.com/" data-target="_blank" class="indigo">New tab</li>
</ul>
</div>
</div>

Hidden content

A dialog window can contain hidden parts of messages that can be revealed only on mouse hover. The code below shows how this is done.
<div class="dialogContainer">
<div class="dialog">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Visible by default
<div class="hiddenContent">Hidden content will showup on hover.</div>
</div>
</div>
<div class="hiddenContent">
<ul>
<li data-dialog-action="close">Close</li>
<li data-href="http://google.com/">Visit</li>
</ul>
</div>
</div>
</div>

Subscribe Form

You can also use a dialog as a subscribe form to acquire new users.
You can find working examples here:
<div class="dialogContainer">
<!-- Email Form Dialog -->
<div class="dialog hidden" data-dialog-id="form">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text center">
<strong>Hey Vladimir</strong>, Just for today we have 30% discount for Ink UI.
</div>
</div>
<form action="path-to-your-subsctibe-script.php" method="post" autocomplete="on">
<ul>
<li><input type="email" autocomplete="on" placeholder="Enter your email"></li>
<li class="indigo" data-type="submit">Submit</li>
</ul>
</form>
</div>
</div>

Show Dialog

To show a dialog window make sure that it has a data-dialog-id="unique-id" attribute with unique value. Then add data-dialog-action="open" and data-dialog-id="unique-id" attributes to any element.
You can also open dialog with JS code. Just call the $('.dialog[data-dialog-id=unique-id]').slidesDialog('open');.
<!-- Buttons to show dialog -->
<div class="button" data-dialog-action="open" data-dialog-id="unique-id">Show Dialog</div>
<div class="button" onclick="$('.dialog[data-dialog-id=unique-id]').slidesDialog('open');">Show Dialog with JS</div>
<div class="dialogContainer">
<!-- Dialog -->
<div class="dialog hidden" data-dialog-id="unique-id">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Your text message here.
</div>
</div>
</div>
</div>

Close Dialog

You can hide the Dialog message in different ways:
  1. 1.
    By clicking on any element with data-dialog-action="close" attribute located inside the dialog element.
  2. 2.
    By clicking on any element with data-dialog-action="close" and data-dialog-action="close" attribute located outside the dialog element.
  3. 3.
    Using JS code $('.dialog[data-dialog-id=unique-id]').slidesDialog('close');.
  4. 4.
    By adding data-dialog-cookie-age="30" attribute to your dialog element. In this case, the dialog will be shown once and then will not be shown for 30 days.
  5. 5.
    By setting cookie with name equals to dialog-id attribute of a dialog. Just add onclick="$.cookie('unique-id',true,{expires:30,path:'/'});" to any element to set cookie by click.
<!-- Buttons to hide dialog -->
<div class="button" data-dialog-action="close" data-dialog-id="unique-id">Close Dialog</div>
<div class="button" onclick="$('.dialog[data-dialog-id=unique-id]').slidesDialog('close');">Close Dialog with JS</div>
<div class="button" onclick="$('.dialog[data-dialog-id=unique-id]').slidesDialog('close'); $.cookie('unique-id',true,{expires:30,path:'/'});">Close Dialog and don't show it for 30 days</div>
<div class="dialogContainer">
<!-- Dialog -->
<div class="dialog" data-dialog-id="unique-id" data-dialog-cookie-age="30">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
Your text message here.
</div>
</div>
<ul>
<li data-dialog-action="close">Close</li>
</ul>
</div>
</div>

Open dialog with delay, hide automatically.

You can open the dialog window in a few seconds after the page loaded. To do so, add data-dialog-open-delay="1000" attribute to your dialog element. You can also hide a dialog after a few seconds, to do so, add data-dialog-close-delay="3000" attribute to your dialog element. The values are in ms, so 1000 equals to 1 second delay.
<div class="dialogContainer">
<!-- Show after 1 second and hide after 3 seconds -->
<div class="dialog hidden" data-dialog-id="unique-id" data-dialog-action="open" data-dialog-open-delay="1000" data-dialog-close-delay="3000">
<div class="close" data-dialog-action="close"></div>
<div class="dialogContent">
<div class="text">
This dialog shown after 1 second and will be closed after 3 seconds.
</div>
</div>
</div>
</div>

Create Dialog message with JavaScript

You can create a dialog using just JavaScript and nothing else. Your dialog will be applied to the <div class="dialogContainer"></div> element. You can also see the full list of dialog options below:
<!-- Create and Show Dialog window -->
<div class="button createDialog">Create Dialog</div>
<script>
$('.createDialog').on('click', function(){
$.fn.slidesDialog({
id:"dialog-new", // this id will be added to a dialog as a "data-dialog-id" attribute
// this is an HTML code of a dialog
template:''
+'<div class="dialog hidden">'
+'<div class="close" data-dialog-action="close"></div>'
+'<div class="dialogContent">'
+'<div class="text opacity-8">This dialog was created with javascript.</div>'
+'</div>'
+'<ul>'
+'<li data-dialog-action="close" class="indigo">Nice!</li>'
+'</ul>'
+