Add new themes

13 years ago · 5ed270ba1f
2 changed files with 115 additions and 0 deletions
--- a/demo/themes/demo_themes.css
+++ b/demo/themes/demo_themes.css
@ -0,0 +1,62 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: #fff;
+}
+
+body {
+  color: #333;
+  font: 14px/24px sans-serif;
+  margin: 0 auto;
+  max-width: 700px;
+  padding: 30px;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  }
+
+h1 {
+  font: 600 24px/32px sans-serif;
+}
+
+.rslides {
+  margin: 50px auto 0;
+}
+
+
+/* PAGINATION STYLE 2
+--------------------------------------------- */
+
+.rslides_tabs {
+  margin-top: 10px;
+  text-align: center;
+  width: 100%;
+  }
+
+.rslides_tabs li {
+  display: inline;
+  float: none;
+  margin-right: 5px;
+  }
+
+.rslides_tabs a {
+  text-indent: -9999px;
+  overflow: hidden;
+  width: auto;
+  -webkit-radius: 15px;
+  -moz-radius: 15px;
+  border-radius: 15px;
+  background: rgba(0,0,0, .2);
+  display: inline-block;
+  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
+  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
+  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
+  width: 9px;
+  height: 9px;
+  }
+
+.rslides_tabs .rslides_here a {
+  background: rgba(0,0,0, .8);
+  }
--- a/demo/themes/demo_themes.html
+++ b/demo/themes/demo_themes.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Alternative pagination styles</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+  <link rel="stylesheet" href="../../responsiveslides.css" />
+  <link rel="stylesheet" href="demo_themes.css" />
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="../../responsiveslides.js"></script>
+  <script>
+  jQuery(function() {
+    // Slideshow 1
+    $("#slides1").responsiveSlides({
+      auto: false,
+      pagination: true,
+      nav: true,
+      fade: 300,
+      maxwidth: 800
+    });
+
+    // Slideshow 4
+    $("#slides2").responsiveSlides({
+      auto: false,
+      pagination: false,
+      nav: true,
+      fade: 300,
+      maxwidth: 800
+    });
+  });
+  </script>
+</head>
+<body>
+  <div id="wrapper">
+    <h1>Alternative pagination styles</h1>
+
+    <!-- Slideshow 1 -->
+    <ul id="slides1">
+      <li><img src="../1.jpg" alt="" /></li>
+      <li><img src="../2.jpg" alt="" /></li>
+      <li><img src="../3.jpg" alt="" /></li>
+    </ul>
+
+    <!-- Slideshow 2 -->
+    <ul id="slides2">
+      <li><a href="#"><img src="../1.jpg" alt="" /></a></li>
+      <li><a href="#"><img src="../2.jpg" alt="" /></a></li>
+      <li><a href="#"><img src="../3.jpg" alt="" /></a></li>
+    </ul>
+
+  </div>
+</body>
+</html>