framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/modals.html

@@ -0,0 +1,33 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Modals</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="modals" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:</p>
+      </div>
+      <div class="content-block row">
+        <div class="col-33"><a href="#" class="button demo-alert">Alert</a></div>
+        <div class="col-33"><a href="#" class="button demo-confirm">Confirm</a></div>
+        <div class="col-33"><a href="#" class="button demo-prompt">Prompt</a></div>
+      </div>
+      <div class="content-block row">
+        <div class="col-50"><a href="#" class="button demo-login">Login Modal</a></div>
+        <div class="col-50"><a href="#" class="button demo-password">Password Modal</a></div>
+      </div>
+      <div class="content-block row">
+        <div class="col-50"><a href="#" class="button demo-actions">Action Sheet</a></div>
+        <div class="col-50"><a href="#" data-popup=".demo-popup" class="button open-popup">Popup  </a></div>
+      </div>
+      <div class="content-block">
+        <p>Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <a href="#" style="display:inline-block; vertical-align:middle" class="button demo-actions-popover">Action/Popover</a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html

@@ -0,0 +1,46 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Navbars And Toolbars</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="navbars-toolbars" class="page">
+    <div class="page-content">
+      <div class="list-block">
+        <ul>
+          <li><a href="deep-navbar.html" class="item-link">
+              <div class="item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">Deep Dynamic Navbar</div>
+                </div>
+              </div></a></li>
+          <li><a href="hide-navbar-toolbar.html" class="item-link">
+              <div class="item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">Hide Navbar & Toolbar</div>
+                </div>
+              </div></a></li>
+          <li><a href="tabbar.html" class="item-link">
+              <div class="item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">Tab Bar</div>
+                </div>
+              </div></a></li>
+          <li><a href="tabbar-labels.html" class="item-link">
+              <div class="item-content">
+                <div class="item-media"><i class="icon icon-f7"></i></div>
+                <div class="item-inner">
+                  <div class="item-title">Tab Bar With Labels</div>
+                </div>
+              </div></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html

@@ -0,0 +1,11 @@
+
+<div class="pages navbar-through">
+  <div data-page="no-navbar-toolbar" class="page no-navbar no-toolbar">
+    <div class="page-content">
+      <div class="content-block">
+        <p>On this page Navbar and Toolbar were hidden dynamically. Just add "no-toolbar no-navbar" class to this page to make it work.</p>
+        <p><a href="index.html" class="back button">Go Back </a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/no-navbar.html

@@ -0,0 +1,11 @@
+
+<div class="pages navbar-through">
+  <div data-page="no-navbar" class="page no-navbar">
+    <div class="page-content">
+      <div class="content-block">
+        <p>On this page Navbar was hidden dynamically. All you need to make it work is just to add "no-navbar" class to this page.</p>
+        <p><a href="index.html" class="back button">Go Back </a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/no-toolbar.html

@@ -0,0 +1,18 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Hide Toolbar</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="no-toolbar" class="page no-toolbar">
+    <div class="page-content">
+      <div class="content-block">
+        <p>On this page Toolbar was hidden dynamically. Just add "no-toolbar" class to this page to make it work.</p>
+        <p><a href="index.html" class="back button">Go Back </a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/notifications.html

@@ -0,0 +1,21 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Notifications</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="notifications" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Framework7 comes with simple Notifications component that allows you to show some useful messages to user.</p>
+        <p><a href="#" class="button ks-notification-simple">Default notification</a></p>
+        <p><a href="#" class="button ks-notification-full">Full-layout notification</a></p>
+        <p><a href="#" class="button ks-notification-custom">With custom image</a></p>
+        <p><a href="#" class="button ks-notification-callback">With callback on close</a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/panel-right2.html

@@ -0,0 +1,16 @@
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="sliding center">Panel Page 2</div>
+  </div>
+</div>
+<div class="pages">
+  <div data-page="panel-right2" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>This is a panel page 2</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex!</p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/panel-right3.html

@@ -0,0 +1,16 @@
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Panel Page 3</div>
+  </div>
+</div>
+<div class="pages">
+  <div data-page="panel-right3" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>This is a panel page 3</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex!</p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/panels.html

@@ -0,0 +1,23 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Side Panels</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="panels" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - <b>cover</b> above the content (like left panel here) and <b>reveal</b> (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels:</p>
+      </div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button open-panel">Left Panel</a></div>
+          <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/photo-browser.html

@@ -0,0 +1,36 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Photo Browser</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="photo-browser" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
+        <ul>
+          <li>Swiper between photos</li>
+          <li>Multi-gestures support for zooming</li>
+          <li>Toggle zoom by double tap on photo</li>
+          <li>Single click on photo to toggle Exposition mode</li>
+        </ul>
+        <p>Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:</p>
+        <div class="row">
+          <div class="col-33"><a href="#" class="button ks-pb-standalone">Standalone</a></div>
+          <div class="col-33"><a href="#" class="button ks-pb-popup">Popup</a></div>
+          <div class="col-33"><a href="#" class="button ks-pb-page">Page</a></div>
+        </div>
+      </div>
+      <div class="content-block">
+        <p>For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
+        <div class="row">
+          <div class="col-50"><a href="#" class="button ks-pb-standalone-dark">Standalone</a></div>
+          <div class="col-50"><a href="#" class="button ks-pb-popup-dark">Popup</a></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/popover.html

@@ -0,0 +1,21 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Popover</div>
+    <div class="right"><a href="#" data-popover=".popover-menu" class="open-popover link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="popover" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>Of course, Framework7 has Popovers. Popovers may be called on absolutely any element with dynamic positioning. Note that due to Apple guide lines it is not recommended to use popovers on iPhone, only on bigger screens (iPad), so on small screen it may have wrong positioning because it is not fit to screen. For iPhone it is recommended to use <a href="modals.html">actions and modals</a> instead. Try the "bars" icon on navbar, "menu" link on bottom toolbar, links and buttons in text below:</p>
+        <p><a href="#" data-popover=".popover-menu" class="button open-popover">Open popover on me</a></p>
+        <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a href="#" class="open-popover" data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
+        <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <a href="#" class="open-popover" data-popover=".popover-menu">popover!</a> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
+        <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <a href="#" class="open-popover" data-popover=".popover-menu">one more popover</a> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/preloader.html

@@ -0,0 +1,28 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Preloader</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="preloader" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for a light background and another on a dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .dark class. Here are some examples:</p>
+      </div>
+      <div class="content-block row ks-preloaders">
+        <div class="col-25">Default:<br><span class="preloader"></span></div>
+        <div style="background-color: #333;" class="col-25">Dark:<br><span class="preloader preloader-white"></span></div>
+        <div class="col-25">Big:<br><span class="preloader ks-preloader-big"></span></div>
+        <div style="background-color: #333;" class="col-25">Dark:<br><span class="preloader preloader-white ks-preloader-big"></span></div>
+      </div>
+      <div class="content-block">
+        <p>With <b>app.showIndicator()</b> you can call small overlay with indicator:</p><a href="#" class="button demo-indicator">Open small indicator overlay</a>
+        <p>With <b>app.showPreloader()</b> you can call modal window with preloader:</p><a href="#" class="button demo-preloader">Open preloader modal</a>
+        <p>With <b>app.showPreloader('My text...')</b> you can call it with custom title:</p><a href="#" class="button demo-preloader-custom">Open custom preloader</a>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html

@@ -0,0 +1,52 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Pull To Refresh</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="pull-to-refresh" class="page">
+    <div class="page-content pull-to-refresh-content">
+      <div class="pull-to-refresh-layer">
+        <div class="preloader"></div>
+        <div class="pull-to-refresh-arrow"></div>
+      </div>
+      <div class="list-block media-list">
+        <ul>
+          <li class="item-content">
+            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44"/></div>
+            <div class="item-inner">
+              <div class="item-title-row">
+                <div class="item-title">Yellow Submarine</div>
+              </div>
+              <div class="item-subtitle">Beatles</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?2" width="44"/></div>
+            <div class="item-inner">
+              <div class="item-title-row">
+                <div class="item-title">Don't Stop Me Now</div>
+              </div>
+              <div class="item-subtitle">Queen</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?3" width="44"/></div>
+            <div class="item-inner">
+              <div class="item-title-row">
+                <div class="item-title">Billie Jean</div>
+              </div>
+              <div class="item-subtitle">Michael Jackson</div>
+            </div>
+          </li>
+        </ul>
+        <div class="list-block-label">
+          <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native iOS scrolling so it may not work on desktop browser.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/searchbar.html

@@ -0,0 +1,233 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Search Bar</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="searchbar" class="page">
+    <form data-search-list=".search-here" data-search-in=".item-title" class="searchbar">
+      <div class="searchbar-input">
+        <input type="search" placeholder="Search"/><a href="#" class="searchbar-clear"></a>
+      </div><a href="#" class="searchbar-cancel">Cancel</a>
+    </form>
+    <div class="searchbar-overlay"></div>
+    <div class="page-content">
+      <div class="list-block searchbar-not-found">
+        <ul>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Nothing found</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="list-block search-here searchbar-found">
+        <ul>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Acura </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Audi</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">BMW</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Cadillac </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Chevrolet </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Chrysler </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Dodge </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Ferrari </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Ford </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">GMC </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Honda</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Hummer</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Hyundai</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Infiniti </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Isuzu </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Jaguar </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Jeep </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Kia</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Lamborghini </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Land Rover</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Lexus </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Lincoln </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Lotus </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Mazda</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Mercedes-Benz</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Mercury </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Mitsubishi</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Nissan </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Oldsmobile </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Peugeot </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Pontiac </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Porsche</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Regal</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Saab </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Saturn </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Subaru </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Suzuki </div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Toyota</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Volkswagen</div>
+            </div>
+          </li>
+          <li class="item-content">
+            <div class="item-inner">
+              <div class="item-title">Volvo</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/slider-custom.html

@@ -0,0 +1,28 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Custom Controls</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="slider-custom" class="page no-toolbar">
+    <div class="page-content">
+      <div class="ks-slider-custom">
+        <div data-pagination=".slider-pagination" data-spaceBetween="0" data-nextButton=".slider-next-button" data-prevButton=".slider-prev-button" data-indexButton=".slider-pagination-bullet" data-paginationHide="false" class="slider-container slider-init">
+          <div class="slider-pagination"></div>
+          <div class="slider-wrapper">
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?1)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?2)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?3)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?4)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?5)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?6)" class="slider-slide"></div>
+            <div style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?7)" class="slider-slide"></div>
+          </div>
+        </div><a href="#" class="slider-prev-button"><i class="icon icon-prev"></i></a><a href="#" class="slider-next-button"><i class="icon icon-next"></i></a>
+      </div>
+    </div>
+  </div>
+</div>