diff --git a/README.md b/README.md
index 3af3e7a..bd180e5 100644
--- a/README.md
+++ b/README.md
@@ -3,56 +3,9 @@
A simple, lightweight, and responsive jQuery slideshow by Kevin Thornbloom that features Ken Burns type animations.
-##Demo
-http://kthornbloom.com/smoothslides
+##Demo and Usage Info
+http://kthornbloom.com/smoothslides.php
-##Features
-
-- Lightweight [6Kb]
-- Four Animation Types: Zoom In, Zoom Out, Pan Left, Pan Right, Pan Up, Pan Down
-- Easily add captions
-- CSS3 transitions for smoother effects
-- Responsive image sizes
-- Set various defaults
-
-##Usage
-- Include smoothslides.css in the header
-- Include jQuery and smoothslides.min.js in the footer
-- Create a div with a class of "ss-slides". Create each slide within as a div called "ss-slide" and place your image inside. Images should be the same size.
-- Want a caption? Add a title attribute to your "ss-slide" div.
-- Call your script:
-
-
-
-
-##Browser Support
-- Full support: Chrome, Safari, Firefox (16+), Internet Explorer (9+)
-- Supported without transitions: Internet Explorer 7-8, Firefox (-16)
-- Unsupported: Internet Explorer 6
-
-
-
-##Licensing
-Free to use and modify personally or commercially. Not for resale.
##Help & Feedback
Connect with me on twitter.
diff --git a/css/smoothslides.css b/css/smoothslides.css
index d24cf8a..a7fd08d 100644
--- a/css/smoothslides.css
+++ b/css/smoothslides.css
@@ -2,23 +2,36 @@
position: relative;
display: inline-block;
line-height: 0px;
- overflow: hidden;
- border-radius: 6px;
}
-.ss-caption {
- background:rgb(255,255,255);
- background:rgba(255,255,255,.7);
- color:#555;
- width:100%;
- padding:15px 0;
- font-family:sans-serif;
- font-size:16px;
+.ss-capwrap {
text-align:center;
position:absolute;
- bottom:0px;
- -webkit-transition:all .2s ease-out;
- -moz-transition:all .2s ease-out;
- transition:all .2s ease-out;
+ bottom:5px;
+ width:100%;
+ text-align: center;
+}
+.ss-caption {
+ font-size:16px;
+ display: inline-block;
+}
+.ss-pag-wrap {
+ position: absolute;
+ text-align: center;
+ width: 100%;
+}
+.ss-paginate {
+ display: inline-block;
+ font-size: 20px;
+}
+.ss-paginate a:link,
+.ss-paginate a:visited {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ background: #ccc;
+}
+.ss-current {
+ background:#000!important;
}
.ss-slides {
position:relative;
@@ -53,21 +66,13 @@
transition: none!important;
}
#ss-prev, #ss-next {
- position:absolute;
- bottom:0;
- z-index: 50;
- font-size: 14px;
- line-height: 1em;
- display: inline-block;
- background:rgb(255,255,255);
- background:rgba(255,255,255,.7);
- color:#000;
- padding:8px;
- text-decoration: none;
+ position: absolute;
+}
+#ss-prev:hover, #ss-next:hover {
}
#ss-prev {
- left:0px;
+ left:-23px;
}
#ss-next {
- right:0px;
+ right:-23px;
}
\ No newline at end of file
diff --git a/css/smoothslides.theme.css b/css/smoothslides.theme.css
new file mode 100644
index 0000000..a921842
--- /dev/null
+++ b/css/smoothslides.theme.css
@@ -0,0 +1,104 @@
+.ss-slides-wrap {
+ position: relative;
+ display: inline-block;
+ line-height: 0px;
+}
+.ss-capwrap {
+ text-align:center;
+ position:absolute;
+ bottom:5px;
+ width:100%;
+ text-align: center;
+}
+.ss-caption {
+ background: #444444;
+ border-radius:4px;
+ color:#fff;
+ padding:15px 10px;
+ font-family:sans-serif;
+ font-size:16px;
+ display: inline-block;
+}
+.ss-pag-wrap {
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ padding-top:5px;
+}
+.ss-paginate {
+ display: inline-block;
+ font-size: 20px;
+ padding: 5px 10px;
+ border-radius: 4px;
+ background: #444444;
+}
+.ss-paginate a:link,
+.ss-paginate a:visited {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 6px;
+ margin: 3px 6px;
+ background: #FFF;
+}
+.ss-current {
+ background:#36f9a5!important;
+ box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(54, 249, 165, 0.27), 0 2px 2px #000;
+}
+.ss-slides {
+ position:relative;
+ overflow:hidden;
+ display:inline-block;
+ transform-origin:50% 50%;
+ -ms-transform-origin:50% 50%;
+ -webkit-transform-origin:50% 50%;
+}
+.ss-slide {
+ top:0;
+ left:0;
+ position: absolute;
+ zoom: 1;
+ line-height:0;
+ -webkit-backface-visibility: hidden;
+}
+.ss-slide:after {
+ content: "";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+}
+.ss-slide img {
+ max-width:100%;
+}
+.notrans {
+ -webkit-transition: none!important;
+ -moz-transition:none!important;
+ transition: none!important;
+}
+#ss-prev, #ss-next {
+ position: absolute;
+ top: 50%;
+ z-index: 50;
+ font-size: 55px;
+ font-family: serif;
+ margin-top: -20px;
+ line-height: 31px;
+ width: 40px;
+ height: 40px;
+ display: inline-block;
+ color: #a7a7a7;
+ background: #FFF;
+ text-decoration: none;
+ border-radius: 30px;
+}
+#ss-prev:hover, #ss-next:hover {
+ color:#000;
+}
+#ss-prev {
+ left:-23px;
+}
+#ss-next {
+ right:-23px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c869172..0f25e04 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
-
+