Brand Name

Getting Started

File Structure

Basic Template

Template Generator

Keep Updated

Minified Version

Slides

Effects

Parameters

Content Position

Navigation By #hash

White Slide

Background

Element Animation

Javascript Trigger

Panels

Sections

Size

Responsive Panels

Hide on Scroll

Navigation

Dots

Navigation Classes

Exclude from Navigation

Components

Sidebar

Popup

Slider

Dropdown

Dialog

Zoom Image

Buttons

Grid

Flex Grid

Sound

Contact Form

Status Classes

Responsive Control

Useful Classes

SVG Library

Proportional Scaling

Change Logo

Getting Started

Slides is a simple-to-use HTML5/CSS3/jQuery template. To get started: Download your copy of Slides from your Designmodo Account and unpack an archive. Upload the contents to the root folder of your website or any folder you like.

File Structure

Default Structure:

Copyslides/
├─ index.html
├─ css/
│  └─ slides.css
├─ js/
│  ├─ slides.js
│  └─ plugins.js
└─ assets/
   ├─ img/
   └─ svg/
slides/ ├─ index.html ├─ css/ │ └─ slides.css ├─ js/ │ ├─ slides.js │ └─ plugins.js └─ assets/ ├─ img/ └─ svg/

Or Minified:

Copyslides/
├─ index.html
├─ css/
│  └─ slides.min.css
├─ js/
│  └─ slides.min.js
└─ assets/
   ├─ img/
   └─ svg/
slides/ ├─ index.html ├─ css/ │ └─ slides.min.css ├─ js/ │ └─ slides.min.js └─ assets/ ├─ img/ └─ svg/

Basic Template

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   
   <!-- Page title -->
   <title>Slides Project</title>
   
   <!-- Fonts and Material Icons -->
   <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Material+Icons" rel="stylesheet" type="text/css">
   
   <!-- Styles -->
   <link href="css/slides.css" rel="stylesheet" type="text/css">
   
   <!-- Scripts -->
   <script src="http://code.jquery.com/jquery-2.2.4.min.js" name="jquery"></script>
   <script src="js/plugins.js" type="text/javascript" name="plugins"></script>
   <script src="js/slides.js" type="text/javascript" name="main-scripts"></script>

</head>
<body class="slides">

  <svg xmlns="http://www.w3.org/2000/svg"> style="display:none">
    <!-- Your vector graphics -->
  </svg>
  
  <!-- Your Slides and Other Stuff -->

</body>
</html>

Your slides, navigation, popups and panels should be placed inside the <body> </body> tags.

Notice: If you want to use a template from the templates folder as the main page located in a root folder, don't forget to remove the <base> tag from <head>.

Template Generator

This is the fastest and easiest way to start your project. This tutorial takes you step by step through the process of creating a site with Slides using Template Generator.

Keep Updated

Slides is very easy to customize. Just keep your changes separate from the Slides files so your files are protected when Slides is updated in the future.

Custom Styles

Add a class custom on your <html> element.

<!doctype html>
<html>
<head>
   ...
   <!-- Styles -->
   <link href="css/slides.css" rel="stylesheet" type="text/css">
   
   <!-- Custom Styles -->
   <link href="css/custom.css" rel="stylesheet" type="text/css">
   ...
<body class="slides">

<!-- Your slides are here -->

</body>
</html>

This approach will prevent the loss of your changes and save time when transferring your customized site files.

Minified Version

You can find a minified version of styles and scripts along with normal ones. Use the minified versions of both the slides.js and plugins.js scripts to reduce file size.

Slides

Slides should be placed in the root of your site inside the <body> element. The order of slides on the site will depend on the order of slides in your code. Here is the example of a simple slide layout:

Copy<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Effects

To change the default effect on slide changes, choose one of the effect classes provided by Slides. Add the effect class you prefer on the <body> element.

Slide Effect

You have the following effects: zen, cards, zoom, film, stack and plain. Use Template Generator to pick a style you want. Here is an example of a stack effect:

<body class="slides stack">

<!-- Your slides are here -->

</body>

Effect Offset

By default elements start their animation after the slide animation is finished. But you can change the offset for the animation of the elements to start for Slide Effect by adding the following parameter somewhere on the page:

Copy<!-- for desktop -->
<script> window.effectOffset = 200; //default value </script>

Disable Scroll

You can prevent a slide change on mouse scroll for Slide Effect by adding the following parameter somewhere on the page:

Copy<!-- for desktop -->
<script> window.disableOnScroll = 1; </script>

<!-- for mobile -->
<script> window.disableOnSwipe = 1; </script>

Adjust Minimum Scroll/Swipe to Slide

You can adjust the minimum scroll size required to change the slide for Slide Effect by adding the following parameter somewhere on the page:

Copy<!-- for desktop -->
<script> window.minScrollToSlide = 500; //default value </script>

<!-- for mobile -->
<script> window.minSwipeToSlide = 35; //default value </script>

Scroll Effect

If you want to add a classic scroll to your page to make it look more classic, add a class scroll on your <body>.

<body class="slides scroll">

<!-- Your slides are here -->

</body>

Note: Panels will be attached to top and bottom of a page. Add class fixed to make it fixed. Please, view this example.

Auto Height

Using the Scroll Effect you might want to use an autoHeight class on your slide section to set a height of the slide to auto.

Copy<section class="slide autoHeight">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- I'm short and wide :) -->
      
      </div>
    </div>
  </div>
</section>

Parameters

Speed

If you want to adjust default speed, use additional classes slow and fast on <body> element. It will change the speed of element appearances and slide changing.

<body class="slides slow">

<!-- Your slides are here -->

</body>

Easing

If you want to adjust easing during a slide change, use additional classes smooth and bounce on <body> element. It will change the speed of element appearances and easing when slides change.

<body class="slides smooth">

<!-- Your slides are here -->

</body>

Direction

If you want to set slide changes to horizontal mode, use horizontal class on the <body> element. This will change the direction of slide changes as well as the swipe direction on mobile devices and tablets.

<body class="slides horizontal">

<!-- Your slides are here -->

</body>

Animation

To add an ability to animate elements, simply add animated class on <body>:

<body class="slides animated">

<!-- Your slides are here -->

</body>

Smooth Scroll

You can add Smooth Scroll feature by adding smoothScroll class on <body>. Scrollable content will scroll smoothly to match the look and feel of Slides. This smooth scroll applies to all slides under Slide Effect and the the entire page with Scroll Effect:

<body class="slides smoothScroll">

<!-- add -->

</body>

Preloading Control

You can disable the default pre-loading feature of Slides by adding noPreload class on <body>:

<body class="slides noPreload">

<!-- add -->

</body>

Content Position

By default, all content is centered on the x- and y-axis. You can change this position by adding top, bottom, left and right classes on your slide section:

Copy<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap left bottom">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Navigation By #hash

You can add a hash-link on any slide you want using the data-name attribute.

Copy<section class="slide" data-name="hash">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Now you can open any slide you want by visiting http://yoursite.com/#hash or right from slides page by clicking on link elements with href tags containing your link:

Copy<a href="#hash">Open #hash slide</a>

Example.


You can turn off the default URL hash setting function on Slide change by adding a following code after the main slides.js script.

Copy<script>
  window.setHashLink = 0;
</script>

White Slide

The text color on slides and panels is white by default. You can add whiteSlide class on your slide section to invert the text color and the color of SVGs and navigation dots on panels. You can also add custom CSS to update the color of elements on WhiteSlide panels.

Copy<section class="slide whiteSlide">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Background

Background Color

To change the background color of your slide, simply add a color class to your slide element. You can find all colors here.

Copy<section class="slide green">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
  <div class="background"></div>
</section>

Or you can apply your color as a style directly on background layer:

Copy<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
  <div class="background" style="background:#B0D1E5"></div>
</section>

Background Image

You can also use an image as the background of any slide:

Copy<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(/assets/img/img-1.jpg)"></div>
</section>

Fading

To achieve different blending effects, you can vary the amount of opacity for a background color or image used in your design. Using class fade-X, where X is amount of fade.

Copy<section class="slide fade-4">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(../docs/assets/img/img-1.jpg)"></div>
</section>

Example.

Background Animation

All of the default slides and templates in Slides have animated background image effects. You can choose from four different animated effects to modify the appearance of your backgrounds. You can choose kenBurns, kenBurns zoomout, scenic or parallax:

Copy<section class="slide fade kenBurns">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
  <div class="background" style="background-image:url(../docs/assets/img/img-1.jpg)"></div>
</section>

You can find all background effects here.

Background Video

You can use HTML5 background video on slides. Here is an example:

Copy<section class="slide fade video">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
        
      </div>
    </div>
  </div>
  <div class="background">
    <video poster="/path/to/poster.jpg" autoplay="" loop="" muted="">
      <source src="/path/to/video.mp4" type="video/mp4">
      <source src="/path/to/video.webm" type="video/webm">
      <source src="/path/to/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

Mobile Support for Background Videos

You can also use HTML5 background video on slides by adding an animated gif background element as shown here:

Copy<section class="slide fade video">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
        
      </div>
    </div>
  </div>
  <div class="background" style="background-image:url('/path/to/mobile-video.gif');">
    <video poster="/path/to/poster.jpg" autoplay="" loop="" muted="">
      <source src="/path/to/video.mp4" type="video/mp4">
      <source src="/path/to/video.webm" type="video/webm">
      <source src="/path/to/video.ogv" type="video/ogv">
    </video>
  </div>
</section>

Example.

Element Animation

You can animate the appearance of elements on the selected slides. Be sure you've added animated class on <body>.

Order

You can set your order of appearance by setting an ae-X number. The higher the number, the later it will appear. You can use up to 10 animated elements. The speed of occurrence of elements depends on the main speed.

Copy<section class="slide">
  <div class="content">
    <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>
</section>

I will appear first

I will appear second

Direction

By default, all elements are shown from the bottom up. You can change this by adding suitable classes: fromLeft, fromTop, fromRight, fromBottom, fromCenter and fromAbove.

Copy<section class="slide">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <h1 class="ae-1 fromTop">I will appear from top</h1>
        <p class="ae-2 fromLeft">I will appear from left</p>
        <button class="ae-3 fromCenter">I will appear from center</button>
      
      </div>
    </div>
  </div>
</section>

I will appear from top

I will appear from left

You can change this for all animated elements at once by adding the desired direction class on slide element or even on <body>, which will apply to animation direction on all sections and slides on a page.

Copy<section class="slide fromLeft">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <h1 class="ae-1">I will appear from left</h1>
        <p class="ae-2">I will appear from left</p>
        <button class="ae-3 fromBottom">I will appear from bottom</button>
      
      </div>
    </div>
  </div>
</section>

I will appear from left

I will appear from left

View all examples of element animation here.

Javascript Trigger

You can listen for a callback on slide change with this handy trigger:

Copy<script>
  $(window).on('slideChange',function(event, number, element){
    
    //Your code here, for example:
    console.log( "Current slide is " + $(element).data('title') + " #" + number);
  });
</script>

Check out the example.

Panels

You can add top and bottom panels over slides to control the placement and appearance of a logo, buttons and/or menu items. Basically, you can put any element anywhere you want. By default panels are fixed for all Scroll effects, except Scroll. If you want to make panel fixed to the top/bottom of the screen, simply add a class fixed on it.

Sections

Depending on your design preference, there could be one, two or three sections inside a panel. Here is a simple example of a top panel with three sections:

Copy<nav class="panel top">
  <div class="sections">
    <div class="left">
      <!-- Left side -->
    </div>
    <div class="center">
      <!-- Center -->
    </div>
    <div class="right">
      <!-- Right Side -->
    </div>
  </div>
</nav>

Size

You can control the amount of space a panel occupies by adding either large or small class to it.

Copy<nav class="panel top small">
  <!-- Panel Contents -->
</nav>

Responsive Panels

As usually happens in such cases - more narrow displays may not have enough space to fit all the information. We have provided a compact version for your panels:

Copy<nav class="panel top">
  <div class="sections desktop">
    <!-- Desktop Menu Contents -->
  </div>
  <div class="sections compact">
    <!-- Compact Menu Contents -->
  </div>
</nav>

Javascript code provided with slides will automatically calculate minimal width needed for your content both on resize and load to switch on compact version and back. You can force to switch to the compact panel on mobile devices by adding a forceMobileView class on panel element. Even if there enough space to show a panel content it will switch to the compact version on mobile devices.

Copy<nav class="panel top forceMobileView">
  <div class="sections desktop">
    <!-- Desktop Menu Contents -->
  </div>
  <div class="sections compact">
    <!-- Compact Menu Contents -->
  </div>
</nav>

Find all top and bottom panels on slides/library/panel/ folder.

Hide on Scroll

You can hide panels on a scroll with the Scroll Effect using a hideOnScroll class on your panel element.

Copy<nav class="panel top hideOnScroll">
  <!-- Panel contents -->
</nav>

Hide on Scroll Sensitivity

You can change the scroll sensitivity to hide the panel with the following setting:

Copy<script>
  //default
  window.hideOnScrollSensitivity = 400; 
</script>

We've also created a few useful examples of panel customization.

Navigation

Dots

Slides uses navigation dots to help your site visitors jump to different sections and pages in your website. In Slides, these nav dots are generated by js code automatically inside <ul> tags, so you don’t need to create them yourself. The number of dots depends on the number of slides you’ve included, as long as the code shown below exists:

Copy<nav class="side">
  <div class="navigation">
    <ul></ul>
  </div>
</nav>

By default, dots appear on the right side of a web page. You can move them to left by adding a class left on your side element.

Copy<nav class="side left">
  <div class="navigation">
    <ul></ul>
  </div>
</nav>

You have an option to choose between default, medium and small.

Copy<nav class="side medium">
  <div class="navigation">
    <ul></ul>
  </div>
</nav>

You have an option to choose between circle (default) dots, square and diamond shaped dots. To change the appearance of unselected dots to an outline look, add the class stroke in your code:

Copy<nav class="side square stroke">
  <div class="navigation">
    <ul></ul>
  </div>
</nav>

For horizontal slides you might want to add your navigation dots inside a panel on your page. This will work fine as long as you include a <div class="navigation"><ul></ul></div>. Wrap the navigation element with any tag to control the size, shape and stroke, as shown here:

Copy<nav class="panel bottom">
  <div class="sections">
    <div class="center">
      <nav class="medium diamond stroke">
        <div class="navigation"><ul></ul></div>
      </nav>
    </div>
  </div>
</nav>

Tooltip

You can add tooltips on hover on navigation dots simply by adding data-title="Tooltip Name" on your slides.

Copy<section class="slide" data-title="Tooltip Name">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Compact View

If you have so many slides on your page that all the nav dots won’t fit on a side panel, the slides.js script will automatically set your side element appearance to Compact view. You can also change your navigation by default to compact by adding a compact class:

Copy<nav class="side compact">
  <div class="navigation">
    <ul></ul>
  </div>
</nav>

You might need to use navigation controls (next and previous buttons) for your slides. To do that, use the class nextSlide and prevSlide on any element you want:

Copy<div class="nextSlide">Next</div>
<div class="prevSlide">Back</div>
<div class="toFirstSlide">Start</div>
<div class="toLastSlide">End</div>
<div class="toSlide-5">Slide 5</div>
Next
Back
Start
End
Slide 5

You can exclude some slides from navigation by adding exclude class on your slide element.

Copy<!-- Slide will be shown but ignored from side menu navigation -->
<section class="slide exclude">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

You can assign excluded slides to a parent slide to group them together. Add attribute data-slide-id="unique-id" to a parent slide element and data-parent-slide-id="unique-id" to link them together.

Copy<!-- Parent slide -->
<section class="slide" data-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

<!-- Excluded from navigation -->
<section class="slide exclude" data-parent-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">
      
        <!-- Slide contents -->
      
      </div>
    </div>
  </div>
</section>

Example.

Turn off arrow keys navigation

You can disable the default arrow keys navigation with the following JS parameter:

Copy<script>
  window.disableKeyNavigation = 0;
</script>

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.

Copy<button class="sidebarTrigger" data-sidebar-id="unique-id">Sidebar</button>

Here is the code for a simple sidebar:

Copy<nav class="sidebar" data-sidebar-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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:

Copy<nav class="sidebar" data-sidebar-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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.

Copy<nav class="sidebar left" data-sidebar-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></div>
  <div class="content">
    <!-- content -->
  </div>
</nav>

You can change the width and background of a sidebar:

Copy<nav class="sidebar purple" style="width:300px" data-sidebar-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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:

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

Copy<nav class="sidebar animated" data-sidebar-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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.

Copy<button class="popupTrigger" data-popup-id="unique-id">Popup</button>

Use the code below to create popups:

Copy<div class="popup" data-popup-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></div>
  <div class="content">
    <!-- content -->
  </div>
</div>

For popups with the content centered, use this code:

Copy<div class="popup" data-popup-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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 popupTrigger class on the popup element:

Copy<div class="popup autoplay" data-popup-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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>

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:

Copy<div class="popup" data-popup-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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:

Copy<div class="popup" data-popup-id="unique-id">
  <div class="close"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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:

Copy<div class="popup animated" data-popup-id="unique-id">
  <div class="close ae-1 fromRight"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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>

View all examples of popup usage here.

Slider

The Slider allows you to change images on slides with clicks using simple navigation. A sample of a working Slider is here. You can use multiple sliders on your page, but make sure you've added unique IDs for them.

The slider we’ve included in Slides 3 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:

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

Arrows

You can add arrows to show next or previous element of the Slider:

Copy<div data-slider-id="unique-id" data-slider-action="prev">Prev</div>
<div data-slider-id="unique-id" data-slider-action="next">Next</div>
Prev
Next

You can use this slide as an example.

You can place the Slides 3 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.

Copy<button class="dropdownTrigger" data-dropdown-id="unique-id">Dropdown</button>

Here is the dropdown code:

Copy<div class="dropdown" data-dropdown-id="unique-id">
  <!-- content -->
</div>

Initially the dropdown in Slides 3 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.

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

Copy<div class="dropdown share hidden" 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="title">Share</div>
  <ul>
    <li class="facebook"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fb-like"></use></svg></li>
    <li class="twitter"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg></li>
    <li class="googlePlus"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#googlePlus"></use></svg></li>
    <li class="pinterest"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pinterest"></use></svg></li>
    <!-- li class="stumbleupon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stumbleupon"></use></svg></li>
    <li class="linkedin"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin"></use></svg></li -->
    <li class="mail" data-subject="Subject" data-body="Body">send email</li>
  </ul>
</div>

Dialog

You can use dialog messages on your Slides projects for things like notifying users of new features, invite them to subscribe or communicate with site visitors.

Below is the code for a simple dialog message.

Copy<div class="dialog">
  <div class="close" data-dialog-action="close"></div>
  <div class="dialogContent">
    <div class="text">
      Your text message here.
    </div>
  </div>
</div>
Your text message here.

Group

If you want to be able to show more than one dialog message at the same time, place each one of them into a div with the dialogContainer class attached as shown below.

Copy<div class="dialogContainer">

  <!-- Dialog message 1 -->
  <div class="dialog">
    <div class="close" data-dialog-action="close"></div>
    <div class="dialogContent">
      <div class="text">
        Your first text message here.
      </div>
    </div>
  </div>

  <!-- Dialog message 2 -->
  <div class="dialog">
    <div class="close" data-dialog-action="close"></div>
    <div class="dialogContent">
      <div class="text">
        Your second text message here.
      </div>
    </div>
  </div>

</div>
Your first text message here.
Your second text message here.

Position

You can change the position of the dialog message by adding left and/or bottom classes to the dialog element or to the dialogContainer for multiple Dialog messages.

Copy<div class="dialog left bottom">
  <div class="close" data-dialog-action="close"></div>
  <div class="dialogContent">
    <div class="text">
      Your text message here.
    </div>
  </div>
</div>
Your text message here.

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.

Copy<!-- Dialog /w Buttons -->
<div class="dialog left bottom">
  <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>
Your text message here.
  • Internal
  • Redirect
  • New tab

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.

Copy<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>
Visible by default
Hidden content will showup on hover.
  • Close
  • Visit

Show Dialog

To show a dialog message add class dialogTrigger on any element and data-dialog-id="unique-id" both for elements and dialog.

Copy<!-- Button to show dialog -->
<div class="button dialogTrigger" data-dialog-id="unique-id">Show Dialog</div>

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

Close Dialog

You can hide the Dialog message by clicking on any element with data-dialog-action="close" attribute located within the dialog element. But if you reload the page the Dialog message will show up again. To hide it permanently you can set a cookie with data-set-cookie="30" attribute, where the number represents the lifetime of the session cookie, defined in days. But be aware that the data-dialog-action="hide" attribute will close the Dialog without the cookie, so it will be shown again and again on click.

Copy<div class="dialog hidden" data-dialog-id="unique-id" data-set-cookie="30">
  <div class="dialogContent">
    <div class="text">
      Your text message here.
    </div>
  </div>
  <ul>
    <li data-dialog-action="hide">Hide</li>
    <li data-dialog-action="close">Close</li>
  </ul>
</div>

Subscribe Form

You can also use a dialog as a subscribe form to acquire new users. Add data-on-submit-action="close" attribute to close the Dialog on successful submission.

You can find working examples here:

Copy<!-- Email Form Dialog -->
<div class="dialog hidden" data-dialog-id="form" data-on-submit-acton="close" data-set-cookie="30">
  <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>

Live examples you can find here.

Zoom Image

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

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

Buttons

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

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

Play Buttons

Copy<a href="#" class="button play"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#play"></use></svg></a>
<a href="#" class="button play small red"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#play"></use></svg></a>

Action Buttons

Copy<span class="button actionButton"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"></use></svg></span>
<span class="button actionButton"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-top"></use></svg></span>
<span class="button actionButton"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use></svg></span>
<span class="button actionButton blue"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chat"></use></svg></span>
<span class="button actionButton sound stroke black"><svg class="sound-on"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sound-on"></use></svg><svg class="sound-off"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sound-off"></use></svg></span>
<span class="button actionButton sound playing black"><svg class="sound-on"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sound-on"></use></svg><svg class="sound-off"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sound-off"></use></svg></span>

Grid

Grid allows you to split content into as many as 12 columns and lets you to set a specific position for elements on a page. View all Grid Examples.

Copy<ul class="grid">
  <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>
  • Col 1
  • Col 2
  • Col 3
  • Col 4

Alignment

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

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

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 grid element.

Copy<ul class="grid 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="grid 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>
  • Col 1
  • Col 2
  • Col 3
  • Col 4
  • Col 1
  • Col 2
  • Col 3
  • Col 4

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 grid element, which will delay the switch from columns to rows until the screen size shrinks to less than 768px.

Copy<ul class="grid 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>
  • Col 1
  • Col 2
  • Col 3
  • Col 4

Height Equalizer

Very often, content from one column might be taller than in another and breaking visual symmetry. To prevent this, add a class equal on grid element and equalElement on each element you want to be even. This operation is managed by javascript and runs on load and resize.

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

<ul class="grid 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>
  • Col 1
  • Col 2
  • Col 1

  • Col 2

Fixed Width Content

Hold content in a fixed container inside grid columns using this code.

Copy<ul class="grid">
  <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>
  • Thinner than 4
  • Thinner than 4
  • Thinner than 4

You can push your fixed container to a left or right side of a grid column by adding toLeft or toRight classes:

Copy<ul class="grid">
  <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>
  • Container on the Left
  • Container centered
  • Container on the Right

Masonry

Masonry layouts place your elements in optimal position based on available vertical space.

Copy<ul class="grid masonry fixedSpaces">
  <li class="col-6-12">WIDE BOX</li>
  <li class="col-3-12">SMALL BOX</li>
  <li class="col-3-12">SMALL BOX</li>
  <li class="col-3-12">SMALL BOX</li>
  <li class="col-3-12">SMALL BOX</li>
  <li class="col-3-12">SMALL BOX</li>
</ul>
  • WIDE BOX
  • SMALL BOX
  • SMALL BOX
  • SMALL BOX
  • SMALL BOX
  • SMALL BOX

View all Grid Examples.

Flex Grid

Flex grids have many of the same layout features as you’ll find in classic Grid, but they are more flexible, offering you more layout options.

Copy<ul class="flex">
  <li class="col-3-12">Column #1</li>
  <li class="col-3-12">Column #2</li>
  <li class="col-3-12">Column #3</li>
  <li class="col-3-12">Column #4</li>
</ul>
  • Column #1
  • Column #2
  • Column #3
  • Column #4

Vertical Alignment

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

Copy<ul class="flex verticalCenter">
  <li class="col-6-12">Tall block</li>
  <li class="col-6-12">Short block</li>
</ul>
  • Tall block
  • Short block

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.

Copy<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>
  • Would be first without reverse on mobile
  • Will be first on mobile

Example.

Responsive Control

In a Flex Grid, columns will collapse much as they do in normal Grid, but with a Flex Grid, you can control columns more precisely. Use the following classes to layout your columns exactly like you want:

Copy/*** Tablet landscape and smaller ***/
/* 100% of width */
.col-tablet-1-1 { width: 100%; }

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

/* 1/3 of width */ 
.col-tablet-1-3 { width: 33.33333333%; }

/* 1/4 of width */ 
.col-tablet-1-4 { width: 25%; }


/*** Phablet landscape and smaller ***/
/* 100% of width */
.col-phablet-1-1 { width: 100%; }

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

/* 1/3 of width */ 
.col-phablet-1-3 { width: 33.33333333%; }

/*** Phone portrait and smaller ***/
/* 100% of width */
.col-phone-1-1 { width: 100%; }

/* 1/2 of width */ 
.col-phone-1-2 { width: 50%; }
/*** Tablet landscape and smaller ***/ /* 100% of width */ .col-tablet-1-1 { width: 100%; } /* 1/2 of width */ .col-tablet-1-2 { width: 50%; } /* 1/3 of width */ .col-tablet-1-3 { width: 33.33333333%; } /* 1/4 of width */ .col-tablet-1-4 { width: 25%; } /*** Phablet landscape and smaller ***/ /* 100% of width */ .col-phablet-1-1 { width: 100%; } /* 1/2 of width */ .col-phablet-1-2 { width: 50%; } /* 1/3 of width */ .col-phablet-1-3 { width: 33.33333333%; } /*** Phone portrait and smaller ***/ /* 100% of width */ .col-phone-1-1 { width: 100%; } /* 1/2 of width */ .col-phone-1-2 { width: 50%; }

Example.

Sound

You can use a mp3 audio track as a part of your presentation of as a 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 3, including the speaker icon.

Copy<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 xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sound-on"></use></svg>
  <svg class="sound-off"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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 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 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 with PHP server with SendMail installed.

PHP Script

Copy/* SETTINGS */
$yourEmail = "your.email@gmail.com";
$emailSubject = "Contact Form";

if($_POST){

  /* DATA FROM HTML FORM */
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
  $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";

  /* SEND EMAIL */
  mail($yourEmail, $emailSubject, $message, $headers);
}
/* SETTINGS */ $yourEmail = "your.email@gmail.com"; $emailSubject = "Contact Form"; if($_POST){ /* DATA FROM HTML FORM */ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $headers = "From: $name <$email>\r\n" . "Reply-To: $name <$email>\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"; /* SEND EMAIL */ mail($yourEmail, $emailSubject, $message, $headers); }

Useful examples: 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:

Copy<style>
  /* Applied on <html> */
  .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 <body> */
  .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 current slide is a white slide. Use with .slides to separate it from elements inside .slide */
  
  /* Applied on 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:

Copy<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>
Download for Windows Download for Mac OS X Download for Linux

Responsive Control

You can easily hide any element on mobile device screens by adding the CSS classes shown below:

Copy<!-- 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 Device
</div>

<div class="showForPhone" style="display:none">
  Visible for Phone Device
</div>

<!-- For any mobile device -->
<div class="hideForMobile">
  Invisible for Mobile Device
</div>

<div class="showForMobile" style="display:none">
  Visible for Mobile Device
</div>
Invisible for a Tablet Device
Invisible for Phablet Device
Invisible for Phone Device
Invisible for Mobile Device

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:

Copy<style>
/* Paddings and Margins */
.padding-top-0 { padding-top: 0px!important; }
.padding-top-1 { padding-top: 10px!important; }
/* ... */
.margin-left-20 {  margin-right: 200px!important;  }

/* Crop */
.crop { margin: 0 !important;}
.cropBottom { margin-bottom: 0 !important;}
.cropTop { margin-top: 0 !important;}
.cropLeft, .trim { margin-left: 0 !important;}
.cropRight, .trim { margin-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;}

/* Typography */
.italic { font-style: italic !important;}
.ultraLight,
.uppercase.ultraLight { font-weight: 100 !important;}
.light,
.uppercase.light { font-weight: 300 !important;}
.normal,
.uppercase.normal { font-weight: normal !important;}
.semiBold,
.uppercase.semiBold { font-weight: 500 !important;}
.bold { font-weight: 600 !important;}
.ultraBold,
.uppercase.ultraBold { font-weight: 900 !important;}

</style>

SVG Library

Slides uses SVG (Scalable Vector Graphics) for icons and logo graphics. It’s a wise choice for many reasons: SVG is universal, lightweight, scales up with no loss in quality and styleable with CSS.

The SVG library should be included at the very top of the page after the <body> tag:

<body class="slides">
  <svg xmlns="http://www.w3.org/2000/svg"> style="display:none">
    <symbol id="share" viewBox="0 0 22 22"><path d="M1 5h20c.6 0 1-.4 ... 1-1-1z"></path></symbol>
    <symbol id="logo" viewBox="0 0 106 31"><path d="M17.413 14.04c-.5 ... h6.52z"></path></symbol>
  </svg>
  
  <!-- Your Slides and Other Stuff -->
</body>

You can set a width, height and fill color with css applying it directly to <svg> element using styles or css class.

Proportional Scaling

If you want to proportionally scale SVG images (a logo for example), wrap it with svgContainer class and add scale wide class on your <svg> element:

Copy<div class="svgContainer">
  <svg class="scale wide" style="padding-bottom:29.25%"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
</div>

You can calculate a padding using the simple formula: (height / width) * 100. For example, an image with a 4:3 proportion will have a bottom padding value of 75%.

This tutorial will help you learn how to use SVG in Slides like a pro.

Still have questions? Feel free to ask us anything here.