swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
132 lines (130 loc) • 7.92 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Simple Swiper App</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/simple-app.css">
</head>
<body>
<div class="swiper-nav swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><span>Home</span></div>
<div class="swiper-slide"><span>About Us</span></div>
<div class="swiper-slide"><span>Gallery</span></div>
<div class="swiper-slide"><span>Services</span></div>
<div class="swiper-slide"><span>Contacts</span></div>
</div>
</div>
<div class="swiper-pages swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container scroll-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page-inner">
<h1>Home</h1>
<p>Hello, this is an example of simple Swiper-app with the following features:</p>
<ul>
<li>
<p>scrollable text pages (with Swiper scroll container) and scrollbar plugin</p>
</li>
<li>
<p>fluid scrollable navigation on the top (with Swiper free mode)</p>
</li>
<li>
<p>gallery page (with Swiper vertical mode)</p>
</li>
<li>
<p>fully responsive</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page-inner">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
<p>Harum, facere, quisquam dignissimos dolorem a ex velit amet ad architecto quos adipisci labore sint nulla. Cum, veniam, molestias, excepturi amet consequuntur vel nobis sed minima officia architecto in vitae.</p>
<p>Iure, perferendis, porro error sint nisi quo libero laudantium repudiandae architecto sunt itaque accusamus ipsum quas voluptatum iusto modi facere culpa. Culpa, eaque nisi praesentium aspernatur natus distinctio ad nostrum.</p>
<p>Unde, tenetur porro atque eaque quae repellendus dignissimos doloremque neque quia nulla fugiat quis adipisci rem recusandae eos voluptatem sunt velit natus. Ipsam, facilis molestias animi laboriosam fuga repellat iste.</p>
<p>Consequuntur, cupiditate, fugiat similique repellat voluptates possimus saepe dolorum rem blanditiis illum! Ducimus, pariatur consequatur nobis neque deleniti quaerat omnis! Quaerat, inventore alias veniam vero repudiandae praesentium necessitatibus reprehenderit sit!</p>
<p>Illo, nam qui ipsum aperiam possimus similique eaque officia error consectetur omnis nostrum consequuntur dicta libero aspernatur repudiandae. Quos, odit nemo atque et id error excepturi inventore eum. Quia, sequi?</p>
<p>Nemo, doloribus, consectetur enim sunt cumque quia tenetur fugiat atque repellendus perferendis suscipit quasi ratione repellat deserunt in fuga iste. Et, nobis corporis nemo quo atque at neque consequatur tenetur?</p>
<p>Nisi, odit, quisquam recusandae aspernatur officia facilis saepe repellendus iusto minima maiores ratione sint nihil esse. Consequatur, alias, labore nam voluptate sequi doloremque nobis quisquam earum eligendi impedit eveniet dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container swiper-gallery">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/gallery-2.jpg" height="684" width="1024" alt=""></div>
<div class="swiper-slide"><img src="img/gallery-3.jpg" height="800" width="532" alt=""></div>
<div class="swiper-slide"><img src="img/gallery-4.jpg" height="800" width="532" alt=""></div>
<div class="swiper-slide"><img src="img/gallery-5.jpg" height="684" width="1024" alt=""></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page-inner">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page-inner">
<h1>Contacts</h1>
<p>You can contact us using the following contacts form:</p>
<form action="">
<p><input type="text" name="first" placeholder="First Name..." id=""></p>
<p><input type="text" name="last" placeholder="Last Name..." id=""></p>
<p><input type="text" name="subject" placeholder="Subject..." id=""></p>
<p><textarea name="message" placeholder="Your message..." cols="30" rows="10"></textarea></p>
<p><input type="submit" value="Send"></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<!-- Don't forget to get the latest Swiper and scrollbar version here-->
<script src="js/idangerous.swiper-2.0.min.js"></script>
<script src="js/idangerous.swiper.scrollbar-2.0.js"></script>
<script src="js/simple-app.js"></script>
</body>
</html>