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 @@ - +