For our slides and templates, we’ve provided a wide range of ready-to-use components you can modify for your projects.
Sidebar
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 and data-sidebar-id="unique-id" for elements AND a sidebar to link them together.
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.
Popup
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.
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>
Autoplay Video
You can enable autoplay of Youtube and Vimeo videos embedded with iframe by adding a autoplay class on the popup element:
You can create a slider with videos inside your popup and play the video on the chosen slide. In this case, you don't need to add autoplay class on the popup element, but you should add it to each video inside your popup.
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>
Hide on Click
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:
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.
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.
You can add the total slide counter and display the current slide number. Just add an element with sliderCounter class and put in an element with class now for displaying the current slide number and element with class total to show the total number of slides:
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.
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 its parent slide will be opened.
Add a autoHeight class on your slider element to manually set the correct height of the element each time you change the slider element. This way you can make a smooth animation between elements:
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.
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.
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 the email's subject and body add data-subject="Subject" and data-body="Body" on mail element:
You can use dialog messages on your Slides projects for things like notifying users of new features, accepting cookies and inviting 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.
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 show up 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 a 30% discount for Ink UI.
</div>
</div>
<form action="path-to-your-subscribe-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:
By clicking on any element with data-dialog-action="close" attribute located inside the dialog element.
By clicking on any element with data-dialog-action="close" and data-dialog-action="close" attribute located outside the dialog element.
Using JS code $('.dialog[data-dialog-id=unique-id]').slidesDialog('close');.
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.
Setting a cookie with a name equals to dialog-id attribute of a dialog. Just add onclick="$.cookie('unique-id',true,{expires:30,path:'/'});" to any element to set a cookie by clicking.
<!-- 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, and hide automatically.
You can open the dialog window in a few seconds after the page loads. 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 a 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 is shown after 1 second and will be closed after 3 seconds.
</div>
</div>
</div>
</div>
Create a 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>'
+'</div>',
action: "open", // open or close dialog after initialization. Default is "close"
speed: 500, // open/close animation speed in ms. Default is 500
openAfter: 1000, // wait X ms to show the dialog. Default is 0
closeAfter: 3000 // wait X ms to hide the dialog. Default is 0.
});
});
</script>
You can adjust the width of an element or container using the fix-X-12 classes. By default, these containers are centrally aligned. Add the toLeft class to align it left and toRight to align right.
<div class="fix-1-12">Container maximum width is 80px</div>
<div class="fix-2-12">Container maximum width is 180px</div>
<div class="fix-3-12">Container maximum width is 280px</div>
<div class="fix-4-12">Container maximum width is 380px</div>
<div class="fix-5-12">Container maximum width is 480px</div>
<div class="fix-6-12">Container maximum width is 580px</div>
<div class="fix-7-12">Container maximum width is 680px</div>
<div class="fix-8-12">Container maximum width is 780px</div>
<div class="fix-9-12">Container maximum width is 880px</div>
<div class="fix-10-12">Container maximum width is 980px</div>
<div class="fix-11-12">Container maximum width is 1080px</div>
<div class="fix-12-12">Container maximum width is 1180px</div>
<div class="fix-4-12 toLeft">Left-aligned container</div>
<div class="fix-4-12 toRight">Right-aligned container</div>
Responsive Fixed Width Containers (added since Slides v.7)
You can also set the different maximum width of the container on different breakpoints.
<div class="fix-3-12 fix-laptop-4-12 fix-tablet-4-10 fix-phablet-6-10 fix-phone-8-12 blue padding-2">
This container has different width on different screen sizes
</div>
Flex
Grid allows you to split the content into as many as 12 columns and lets you set a specific position for elements on a page. Use .flex or .inlineFlex (added since Slides v.7) class to enable grid-container behaviour. View all Flex Examples.
Responsive Horizontal Alignment (added since Slides v.7)
Change default start alignment inside flex columns on different screen sizes using classes .horizontal{Start|Center|End|Between|Around|Evenly}-{breakpoint} with the .flex element
Responsive Vertical Alignment (added since Slides v.7)
Change default stretch alignment inside flex columns on different screen sizes using classes .vertical{Start|Center|End|Baseline|Stretch}-{breakpoint} with the .flex element
Responsive Flex Direction (added since Slides v.7)
Change the direction of elements inside the .flex container by adding dirRow-{breakpoint}, dirRowReverse-{breakpoint}, dirColumn-{breakpoint}, dirColumnReverse-{breakpoint}, reverse-{breakpoint} classes to it.
The spaces between rows are relative to the width of the screen by default. If you want to make spaces fixed, just add a class fixedSpaces or noSpaces on flex element.
By default, columns will be converted to rows when the device screen width is less than 1024px. You can add the later class on the flex element, which will delay the switch from columns to rows until the screen size shrinks to less than 768px.
Very often, content from one column might be taller than in another, breaking visual symmetry. To prevent this, add a class equal on flex element and equalElement on each element you want to be even. This operation is managed by javascript and runs on load and resize.
By default, the height equalizer works on screens wider than 1024px. Add the later class to your equal element to make it work from 767px screens and wider. You can also define the exact breakpoint by adding the data-equal-collapse-width="X" attribute. In the end, you can add the equalMobile class to make elements equal on any screen size.
<!-- elements are equal on screens wider than 1024px -->
<ul class="flex equal">
<li class="col-6-12 equalElement">Col 1</li>
<li class="col-6-12 equalElement">Col 2</li>
</ul>
<!-- elements are equal on screens wider than 767px -->
<ul class="flex equal later">
<li class="col-6-12 equalElement">Col 1</li>
<li class="col-6-12 equalElement">Col 2</li>
</ul>
<!-- elements are equal on screens wider than 480px -->
<ul class="flex equal" data-equal-collapse-width="480">
<li class="col-6-12 equalElement">Col 1</li>
<li class="col-6-12 equalElement">Col 2</li>
</ul>
<!-- elements are equal on any screen sizes -->
<ul class="flex equal equalMobile">
<li class="col-6-12 equalElement">Col 1</li>
<li class="col-6-12 equalElement">Col 2</li>
</ul>
Fixed Width Containers in columns
Hold content in a fixed container inside flex columns using this code.
<ul class="flex">
<li class="col-4-12">
<div class="fix-3-12">Thinner than 4</div>
</li>
<li class="col-4-12">
<div class="fix-3-12">Thinner than 4</div>
</li>
<li class="col-4-12">
<div class="fix-3-12">Thinner than 4</div>
</li>
</ul>
You can push your fixed container to a left or right side of a flex column by adding toLeft or toRight classes:
<ul class="flex">
<li class="col-4-12">
<div class="fix-3-12 toLeft">Container on the Left</div>
</li>
<li class="col-4-12">
<div class="fix-3-12">Container centered</div>
</li>
<li class="col-4-12">
<div class="fix-3-12 toRight">Container on the Right</div>
</li>
</ul>
Reorder on resize
You can reorder columns for mobile devices to provide a better experience. Add class reverse on the flex element to reorder collapsed columns.
<ul class="flex reverse">
<li class="col-6-12">Would be first without reverse on mobile</li>
<li class="col-6-12">Will be first on mobile</li>
</ul>
You can use an mp3 audio track as a part of your presentation of as background audio to set the right mood. Here is how you can make it:
You can use mp3 audio tracks as background audio to set the right mood in your slides. Here’s the code you need to add and control audio in Slides, including the speaker icon.
You can send and receive data from the contact form on Slide #55, Slide #157, Slide #163, and Slide #166 with AJAX (without page reloading). The form automatically sends this data to the ajax-email.php script which is located in the root folder of the Slides or Template you've downloaded from Template Generator. To make the script work, open the ajax-email.php file with any text editor and add your email which will enable you to receive messages from the form. You can also set the subject of an email. Note that this script will work only on a PHP server with SendMail installed.
Note: The PHP code included in Slides will forward form information to the email address you input only after you upload your site to your web hosting provider. By default, the PHP form code will not work on your local host server. Once your site is uploaded, the form’s submit button will function correctly.
You can customize your content using the following status classes, depending on various situations and specific requirements. Here are some classes you may find useful:
/* Applied on the <html> element */
.page-ready { } /* When DOM is ready */
.page-loaded { } /* When page is completely loaded */
.resizing { } /* When resizing */
.retina { } /* For devices with high resolution/pixel density */
.mobile { } /* For all iOS, Android, Blackberry, etc. */
.android { } /* For Android device only */
.safari { } /* For Safari browsers */
.firefox { } /* For Firefox */
.chrome { } /* For Chrome */
.msie { } /* For Microsoft Internet Explorer */
.windows { } /* For Windows Users */
.osx { } /* For Mac OS X Users */
.linux { } /* For Linux Users */
.popupShown { } /* When Popup is shown */
.popup_id { } /* When Popup with id="id" is visible */
.sidebarShown { } /* When Sidebar is shown */
.sidebar_id { } /* When Sidebar with id="id" is visible */
.dropdownShown { } /* When Dropdown is shown */
.dropdown_id { } /* When Dropdown with id="id" is visible */
/* Applied on the <body> element */
.firstSlide { } /* When we are on the last slide */
.lastSlide { } /* When we are on the last slide */
.stage-3 { } /* When we are on the third slide only. You can use any number, obviously. */
.slides.whiteSlide { } /* When the current slide is a white slide. Use with .slides to separate it from elements inside .slide */
/* Applied on a slide */
.slide.selected { } /* Selected slide */
.slide.active { } /* Any visible slide is active */
.slide.animate { } /* When animation is started */
Using those status classes shown above, you can control any element or group of elements on your page. Here are some examples:
<style>
.osx .button.downloadOSX,
.linux .button.downloadLinux,
.windows .button.downloadWindows { display:block; }
.button.downloadButton { display:none;}
</style>
<a href="#download-url-windows" class="button downloadButton downloadWindows">Download for Windows</a>
<a href="#download-url-mac" class="button downloadButton downloadOSX">Download for Mac OS X</a>
<a href="#download-url-linux" class="button downloadButton downloadLinux">Download for Linux</a>
Responsive Control
You can easily hide or show any element on mobile device screens by adding the CSS classes shown below:
<!-- Added since Slides v.7. Use the {display}-{breakpoint} classes: -->
<div class="hidden block-laptop inline-tablet inlineBlock-phablet inlineFlex-phone">
This block is hidden on screens larger than 1240px, <br>
shown as block element on screens less than 1240px, <br>
shown as inline element on screens less than 1024px, <br>
shown as inline-block element on screens less than 768px, <br>
shown as inline-flex element on screens less than 436px.
</div>
<div class="hidden-laptop flex-tablet hidden-phablet">
Another example: <br>
This block is visible on screens larger than 1240px, <br>
hidden on screens less than 1240px, <br>
shown as flex element on screens less than 1024px, <br>
hidden on screens less than 768px.
</div>
<!-- DEPRECATED. Works only in old versions. For a screen 1024px wide and smaller -->
<div class="hideForTablet">
Invisible for a Tablet Device
</div>
<div class="showForTablet" style="display:none">
Visible for a Tablet Device
</div>
<!-- DEPRECATED. Works only in old versions. For a screen 768px wide and smaller -->
<div class="hideForPhablet">
Invisible for Phablet Device
</div>
<div class="showForPhablet" style="display:none">
Visible for a Phablet Device
</div>
<!-- DEPRECATED. Works only in old versions. For a screen 436px wide and smaller -->
<div class="hideForPhone">
Invisible for Phone Devices
</div>
<div class="showForPhone" style="display:none">
Visible for Phone Devices
</div>
<!-- DEPRECATED. Works only in old versions. For any mobile device (phone, phablet, or tablet) -->
<div class="hideForMobile">
Invisible for a mobile device
</div>
<div class="showForMobile" style="display:none">
Visible only for a mobile device
</div>
Typography
To speed up your coding process we've created a few classes to set your font family, weight, style, and size.
Font Family (added since Slides v.7)
/* Changes the default font-family for this type of element to Base|Title|Button font selected in the App settings*/
.family-base{font-family: {$baseFontFamily} !important;}
.family-title{font-family: {$titleFontFamily} !important;}
.family-button{font-family: {$buttonFontFamily} !important;}
Also, this scaling model works with all the headings (H1-H6 HTML tags). All the classes are screen-size responsive, which means that the smaller screen you've got, the smaller heading will be. You don't need to set CSS font-size property using @media() query anymore!
You can also use direct font-size-X classes on any element to set its font-size:
These direct font-size-X classes also have a responsive versions:
/* Replace the number to the value from 8 to 24 */
/* Works on screens less than 1023px wide */
.font-size-tablet-14 {font-size: 14px !important;}
/* Works on screens less than 767px wide */
.font-size-phablet-12 {font-size: 12px !important;}
/* Works on screens less than 435px wide */
.font-size-phone-10 {font-size: 10px !important;}
