Components

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.

<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>

Close Sidebar

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>

Position

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>

Customize

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 the 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 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.

<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>

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 the 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 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:

<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 its 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 the 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 the 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, 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.

<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 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>

Live examples you can find here.

Zoom Image

You can enlarge images on click as we did here. Just add data-action="zoom" attribute to your <img/> elements.

<img src="/path/to/image.png" alt="name" data-action="zoom">

Buttons

<a href="#" class="button square">Button</a>
<a href="#" class="button uppercase">Button</a>
<a href="#" class="button round">Button</a>
<a href="#" class="button round red">Button</a>
<a href="#" class="button rounded stroke red">Button</a>
<a href="#" class="button uppercase square stroke textRed">Button</a>
<a href="#" class="button thin-stroke">Button</a>

You can find more button examples here. Also, other button types are shown below.

Play Buttons

<a href="#" class="button play"><svg><use href="assets/svg/icons.svg#play"></use></svg></a>
<a href="#" class="button play small red"><svg><use href="assets/svg/icons.svg#play"></use></svg></a>

See the example.

Action Buttons

<span class="button actionButton"><svg><use href="assets/svg/icons.svg#menu"></use></svg></span>
<span class="button actionButton"><svg><use href="assets/svg/icons.svg#arrow-top"></use></svg></span>
<span class="button actionButton"><svg><use href="assets/svg/icons.svg#share"></use></svg></span>
<span class="button actionButton blue"><svg><use href="assets/svg/icons.svg#chat"></use></svg></span>
<span class="button actionButton sound stroke black"><svg class="sound-on"><use href="assets/svg/icons.svg#sound-on"></use></svg><svg class="sound-off"><use href="assets/svg/icons.svg#sound-off"></use></svg></span>
<span class="button actionButton sound playing black"><svg class="sound-on"><use href="assets/svg/icons.svg#sound-on"></use></svg><svg class="sound-off"><use href="assets/svg/icons.svg#sound-off"></use></svg></span>
<span class="button actionButton big"><svg><use href="assets/svg/icons.svg#menu"></use></svg></span>
<span class="button actionButton larger"><svg><use href="assets/svg/icons.svg#menu"></use></svg></span>

See the example.

Fixed width containers

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>

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. View all Flex Examples.

<!-- 12 column flex -->
<ul class="flex">
  <li class="col-3-12">Col 1</li>
  <li class="col-3-12">Col 2</li>
  <li class="col-3-12">Col 3</li>
  <li class="col-3-12">Col 4</li>
</ul>

<!-- 10 column flex -->
<ul class="flex">
  <li class="col-2-10">Column #1</li>
  <li class="col-2-10">Column #2</li>
  <li class="col-2-10">Column #3</li>
  <li class="col-2-10">Column #4</li>
</ul>

Alignment

Change default centered alignment inside flex columns by adding left and right classes.

<ul class="flex">
  <li class="col-4-12 left">Left</li>
  <li class="col-4-12">Center</li>
  <li class="col-4-12 right">Right</li>
</ul>

Column Spaces

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.

<ul class="flex fixedSpaces">
  <li class="col-3-12">Col 1</li>
  <li class="col-3-12">Col 2</li>
  <li class="col-3-12">Col 3</li>
  <li class="col-3-12">Col 4</li>
</ul>

<ul class="flex noSpaces">
  <li class="col-3-12">Col 1</li>
  <li class="col-3-12">Col 2</li>
  <li class="col-3-12">Col 3</li>
  <li class="col-3-12">Col 4</li>
</ul>

Responsive Control

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.

<ul class="flex later">
  <li class="col-3-12">Col 1</li>
  <li class="col-3-12">Col 2</li>
  <li class="col-3-12">Col 3</li>
  <li class="col-3-12">Col 4</li>
</ul>

Also, you can use the following classes to layout your columns exactly like you want:

/*** TABLET LANDSCAPE AND SMALLER ***/
/* 100% of width */
.col-tablet-1-1 { max-width: 100%; }

/* 2 columns */
.col-tablet-1-2 { max-width: 50%; }

/* 3 columns */
.col-tablet-1-3 { max-width: 33.33333333%; }
.col-tablet-2-3 { max-width: 66.66666666%; }

/* 4 columns */
.col-tablet-1-4 { max-width: 25%; }
.col-tablet-3-4 { max-width: 75%; }

/* 5 columns */
.col-tablet-1-5 { max-width: 20%; }
.col-tablet-2-5 { max-width: 40%; }
.col-tablet-3-5 { max-width: 60%; }
.col-tablet-4-5 { max-width: 80%; }

/*** PHABLET LANDSCAPE AND SMALLER ***/
/* 100% of width */
.col-phablet-1-1 { max-width: 100%; }

/* 2 columns */
.col-phablet-1-2 { max-width: 50%; }

/* 3 columns */
.col-phablet-1-3 { max-width: 33.33333333%; }
.col-phablet-2-3 { max-width: 66.66666666%; }

/* 4 columns */
.col-phablet-1-4 { max-width: 25% !important; }
.col-phablet-3-4 { max-width: 75% !important; }


/*** PHONE PORTRAIT AND SMALLER ***/
/* 100% of width */
.col-phone-1-1 { max-width: 100%; }

/* 2 columns */
.col-phone-1-2 { max-width: 50%; }

/* 3 columns */
.col-phone-1-3 { max-width: 33.33333333%; }
.col-phone-2-3 { max-width: 66.66666666%; }

Height Equalizer

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.

<ul class="flex equal">
  <li class="col-6-12 equalElement">Col 1</li>
  <li class="col-6-12 equalElement">Col 2</li>
</ul>

<ul class="flex equal">
  <li class="col-6-12"><p class="equalElement">Col 1</p></li>
  <li class="col-6-12"><p class="equalElement">Col 2</p></li>
</ul>

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 Content

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>

Vertical Alignment

You can align columns within the parent element using top, bottom, horizontalCenter or verticalCenter classes.

<!-- Columns vertically centered -->
<ul class="flex verticalCenter">
  <li class="col-6-12">Tall <br>block</li>
  <li class="col-6-12">Short block</li>
</ul>x`
<!-- Columns stick to the top -->
<ul class="flex top">
  <li class="col-6-12">Tall <br>block</li>
  <li class="col-6-12">Short block</li>
</ul>
<!-- Columns stick to the bottom -->
<ul class="flex bottom">
  <li class="col-6-12">Tall <br>block</li>
  <li class="col-6-12">Short block</li>
</ul>

Example.

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>

View all Flex Examples.

Sound

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.

<audio src="/music/audiotrack.mp3" data-sound-id="audio" data-sound-fade="500" preload="auto" autoplay="true" loop="true"></audio>

<span class="button actionButton sound soundTrigger" data-sound-id="audio">
  <svg class="sound-on"><use href="assets/svg/icons.svg#sound-on"></use></svg>
  <svg class="sound-off"><use href="assets/svg/icons.svg#sound-off"></use></svg>
</span>

Class playing will be automatically added to an element with the same data-sound-id value as an audio track.

Example.

Contact Form

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.

PHP Script

/* SETTINGS */
$recipient = "your.email@gmail.com";
$subject = "New Message from Contact Form";

if($_POST){

  /* DATA FROM HTML FORM */
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
//$phone = $_POST['phone'];


  /* SUBJECT */
  $emailSubject = $subject . " by " . $name;

  /* HEADERS */
  $headers = "From: $name &lt;$email&gt;\r\n" .
             "Reply-To: $name &lt;$email&gt;\r\n" .
             "Subject: $emailSubject\r\n" .
             "Content-type: text/plain; charset=UTF-8\r\n" .
             "MIME-Version: 1.0\r\n" .
             "X-Mailer: PHP/" . phpversion() . "\r\n";

  /* PREVENT EMAIL INJECTION */
  if ( preg_match("/[\r\n]/", $name) || preg_match("/[\r\n]/", $email) ) {
    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
    die("500 Internal Server Error");
  }

  /* MESSAGE TEMPLATE */
  $mailBody = "Name: $name \n\r" .
              "Email:  $email \n\r" .
              "Subject:  $subject \n\r" .
//            "Phone:  $phone \n\r" .
              "Message: $message";

  /* SEND EMAIL */
  mail($recipient, $emailSubject, $mailBody, $headers);
}
?&gt;

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.

Useful examples: MailChimp, Form Validation, and ReCaptcha.

Status Classes

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:

<style>
  /* 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 */
</style>

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 any element on mobile device screens by adding the CSS classes shown below:

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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 weight, style, and size.

Font styling

<style>
  /* FONT STYLE */
  .italic   {font-style: italic !important;}
  .underline{text-decoration: underline;}
  .uppercase{text-transform: uppercase !important; letter-spacing: 1.35px !important;}
  .condense {letter-spacing: -.65px !important;}
  .expand   {letter-spacing: 4.5px !important;}
  .truncate {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>

Font weight

<style>
  /* FONT WEIGHT */
  .weight-1, .lightest {font-weight: 100 !important;}
  .weight-2, .lighter  {font-weight: 200 !important;}
  .weight-3, .light    {font-weight: 300 !important;}
  .weight-4, .normal   {font-weight: 400 !important;}
  .weight-5, .medium   {font-weight: 500 !important;}
  .weight-6, .semibold {font-weight: 600 !important;}
  .weight-7, .bold     {font-weight: 700 !important;}
  .weight-8, .bolder   {font-weight: 800 !important;}
  .weight-9, .boldest  {font-weight: 900 !important;}
</style>

Font Sizing

We've created scaling classes to easily change the font size. The base font size is 18px.

<style>
  /* FONT SIZING */
  p.largest,  .p.largest  {font-size: 27px;}
  p.larger,   .p.larger   {font-size: 24px;}
  p.large,    .p.large    {font-size: 21px;}
  p,          .p          {font-size: 18px;}
  p.small,    .p.small    {font-size: 16px;}
  p.smaller,  .p.smaller  {font-size: 14px;}
  p.smallest, .p.smallest {font-size: 12px;}
  p.micro,    .p.micro    {font-size: 11px;}
</style>

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:

<style>
  /* SET SIZE DIRECTLY (works for any element) */
  .font-size-8  {font-size: 8px !important;}
  .font-size-9  {font-size: 9px !important;}
  .font-size-10 {font-size: 10px !important;}
  .font-size-11 {font-size: 11px !important;}
  .font-size-12 {font-size: 12px !important;}
  .font-size-13 {font-size: 13px !important;}
  .font-size-14 {font-size: 14px !important;}
  .font-size-15 {font-size: 15px !important;}
  .font-size-16 {font-size: 16px !important;}
  .font-size-17 {font-size: 17px !important;}
  .font-size-18 {font-size: 18px !important;}
  .font-size-19 {font-size: 19px !important;}
  .font-size-20 {font-size: 20px !important;}
  .font-size-21 {font-size: 21px !important;}
  .font-size-22 {font-size: 22px !important;}
  .font-size-23 {font-size: 23px !important;}
  .font-size-24 {font-size: 24px !important;}
</style>

These direct font-size-X classes also have a responsive versions:

<style>
  /* 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;}
</style>

See how it works in action here

Useful Classes

To simplify the flow and readability of your slides, we’ve created a list of classes that can speed up your coding and simplify customizing your code:

<style>
/* PADDINGS AND MARGINS */
.padding-0 { padding: 0px!important;}
.padding-top-0 { padding-top: 0px!important;}
.padding-top-1 { padding-top: 10px!important;}
/* ... */
.margin-left-20 {  margin-right: 200px!important;  }

/* PADDINGS AND MARGINS FOR MOBILE DEVICES */
/* Tablet (1024px) and Smaller */
.padding-tablet-5 { padding: 50px!important;}
.margin-bottom-tablet-10 { margin-bottom: 100px!important;}

/* Phablet (768px) and Smaller */
.padding-right-phablet-1 { padding-right: 10px!important;}
.margin-phablet-2 { margin: 20px!important;}

/* Phone (436px) and Smaller */
.padding-left-phone-5 { padding-left: 50px!important;}
.margin-bottom-phone-20 { margin-bottom: 200px!important;}

/* CROP (removes margin property from element) */
.crop       { margin: 0 !important;}
.cropBottom { margin-bottom: 0 !important;}
.cropTop    { margin-top: 0 !important;}
.cropLeft,
.cropSides  { margin-left: 0 !important;}
.cropRight,
.cropSides  { margin-right: 0 !important;}

/* TRIM (removes padding property from element) */
.trim       { padding: 0 !important;}
.trimBottom { padding-bottom: 0 !important;}
.trimTop    { padding-top: 0 !important;}
.trimLeft,
.trimSides  { padding-left: 0 !important;}
.trimRight,
.trimSides  { padding-right: 0 !important;}

/* OPACITY */
.opacity-0 { opacity: 0 !important;}
.opacity-1 { opacity: 0.1 !important;}
/* ... */
.opacity-10,
.opaque    { opacity: 1 !important;}

/* SPECIFIC */
.block { display: block !important;}
.inlineBlock { display: inline-block !important;}
.inline { display: inline !important;}
.relative { position: relative !important;}
.absolute { position: absolute !important;}
.fixed { position: fixed !important;}
.wide { width: 100% !important;}
.nowrap { white-space: nowrap;}

/* align top and bottom */
.align-top { vertical-align: top !important;}
.align-bottom { vertical-align: bottom !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}

/* aligns for tablet, phablet and phone */
.tablet-align-right { text-align: right !important;}
.phablet-align-left { text-align: left !important;}
.phone-align-bottom { vertical-align: bottom !important;}

/* border-radius */
.round { border-radius: 999px !important; }
.rounded { border-radius: 6px !important; }
.rectangular { border-radius: 0 !important; }
.radius-1 {border-radius: 1px !important;}
...
.radius-25 {border-radius: 25px !important;}
</style>

Material Icons

You can use Material Icons by Google on your Slides project. Simply replace existing icon names with desired ones from this page: https://material.io/icons/

<i class="material-icons md-48">verified_user</i>
<a class="button"><i class="material-icons">arrow_back</i>Back</a>
<a class="button">Next<i class="material-icons right">arrow_forward</i></a>

                <!-- Works even as a panel button -->
<span class="button actionButton"><i class="material-icons">airplay</i></span>

Here is an example on how to use Material Icons in Slides buttons.

PreviousNavigation NextJS

Last updated 8 months ago

Sidebar

Close Sidebar

Position

Customize

Hide Sidebar on Click

Animation

Popup

Autoplay Video

Popup with autoplay video gallery

Close Popup

Hide on Click

Animate Popup

Focus on element in popup

Slider

Arrows

Display slide number

Swipeable

Autoplay

Autoplay video after changing slide

AutoHeight

Animated

Dropdown

Position

Event

Share

Dialog

Position

Buttons

Hidden Content

Subscribe Form

Show Dialog

Close Dialog

Open dialog with delay, and hide automatically.

Create a Dialog message with JavaScript

Zoom Image

Buttons

Play Buttons

Action Buttons

Fixed width containers

Flex

Alignment

Column Spaces

Responsive Control

Height Equalizer

Fixed Width Content

Vertical Alignment

Reorder on resize

Sound

Contact Form

PHP Script

Status Classes

Responsive Control

Typography

Font styling

Font weight

Font Sizing

Useful Classes

Material Icons