https://github.com/stnc/jquery-thumbnail-scroller
STNC Jquery Thumbnail Scroller PLUGIN easy ,flexible demo
https://github.com/stnc/jquery-thumbnail-scroller
jquery jquery-plugin jquery-thumbnail-scroller
Last synced: over 1 year ago
JSON representation
STNC Jquery Thumbnail Scroller PLUGIN easy ,flexible demo
- Host: GitHub
- URL: https://github.com/stnc/jquery-thumbnail-scroller
- Owner: stnc
- Created: 2015-12-26T01:13:18.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-26T15:24:54.000Z (over 10 years ago)
- Last Synced: 2025-01-03T21:46:48.770Z (over 1 year ago)
- Topics: jquery, jquery-plugin, jquery-thumbnail-scroller
- Language: HTML
- Homepage: https://stnc.github.io/jquery-thumbnail-scroller/
- Size: 2.13 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
#STNC Jquery Thumbnail Scroller PLUGIN
easy ,flexible
Demo LINK
#Initialization
##Initialize via javascript
```javascript
jQuery(document).ready(function() {
$('#unique-pager').StncThumbnailScroller({
scrollSpeed : 100,
fadeSpeed : 400,
imagePictureAttr : '#showPicture'
});
});
```
##Initialize via HTML
```html
```
##picture show
```html
![]()
```
##arrows
```html
```
## cssfile
```css
.pictureShow{
width: 399px;
border: 1px solid #ebebeb;
float: left;
height: 505px;
margin: 0 20px 10px 0;
overflow: hidden;
}
#thumbnailsGallery {
margin: 0;
width: 592px;
}
#unique-pager ul li img {
border: 1px solid #dddddd;
padding: 5px;
margin: 5px;
width: 130px;
height: 130px;
background: #f0f0f0;
}
#unique-pager {
border: 1px solid red;
width: 154px;
height: 458px;
overflow: hidden;
font-size: 0;
float:left;
}
.btn{
width: 128px;
height: 20px;
line-height: 20px;
padding: 14px;
float: left;
text-align: center;
background-color: #000;
color: #fff;
cursor: pointer;
}
img {
max-width: 100%;
width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}