Patterns
Accordion
Accordion item 1
Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.
Accordion item 2
Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.
Accordion item 3
Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.
Dropdowns
Absolute
Modals
Default
Sizes
Viewport height
Lightbox
Offcanvas
Default
Displayed at medium MQ
Range slider
Slider
Notes :
- Repo Github : github.com/ganlanyuan/tiny-slider
- Options : ganlanyuan.github.io/tiny-slider
- Demo : ganlanyuan.github.io/tiny-slider/demo
Base
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Toggle script
var options = {
'demo-1': {
items: 1,
responsive: {
576: {
items: 2,
gutter: baseFontSize * getComputedStyle(html).getPropertyValue('--sp-unitless')
},
1200: {
items: 3
},
1600: {
items: 4
}
}
},
'demo-2': {
...
},
'demo-3': {
...
}
};
Alternative controls
Toggle script
var options = {
'demo-1': {
...
},
'demo-2': {
items: 1
},
'demo-3': {
...
}
};
With edgePadding & no controls
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Toggle script
var options = {
'demo-1': {
...
},
'demo-2': {
...
},
'demo-3': {
items: 1,
gutter: baseFontSize,
edgePadding: baseFontSize * 3,
responsive: {
576: {
items: 2
},
1200: {
items: 3
}
}
}
};
With images as thumbnails
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.
Tabs
Notes :
- If there is not
hx
in the content, adddata-hx="hx"
to.js-tabs
.
Tab title #1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?
Tab title #2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?
Tab title #3
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?