search

Get Started

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

hashtag
File Structure

slides/
├─ index.html
├─ css/
│  ├─ slides.min.css
│  └─ slides-customized.min.css // If you have changed the default colors
├─ js/
│  └─ slides.min.js
└─ assets/
   ├─ img/
   └─ svg/

hashtag
Basic Template

index.html
<!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="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Material+Icons&display=swap" rel="stylesheet" type="text/css">

   <!-- Styles -->
   <link href="css/slides.min.css" rel="stylesheet" type="text/css">

   <!-- Scripts -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" name="jquery"></script>
   <script src="js/slides.min.js" type="text/javascript" name="main-scripts"></script>
   <!-- Your SVG Library -->
   <link rel="preload" href="assets/svg/icon-set.svg" as="image" type="image/svg+xml" crossorigin>
</head>
<body class="slides">

  <!-- Place your Slides below -->

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

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

hashtag
Custom Styles and Scripts

All CSS styles and JS scripts from the Slides App automatically merged into /css/custom.css, /css/slides-customized.css and /js/custom.js files. These files are also included into your page HTML code.

hashtag
Minified Version

The minified styles and scripts are included into your page by default. You can find a normal version of styles and scripts in the downloaded archive with sources.

NextSlides

Last updated