Get 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

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

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

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

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

<!doctype html>
<html>
<head>
   ...
   <!-- Styles -->
   <link href="css/slides.min.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 -->
   ...
   <!-- Compressed Scripts -->
   <script src="js/slides.min.js" type="text/javascript"></script>
   <!-- Custom Scripts -->
   <script src="js/custom.js"></script>
</body>
</html>

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