swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
425 lines (418 loc) • 16.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Swiper Appstore</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/appstore.css">
</head>
<body>
<div class="swiper-container featured">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
<a href="http://www.idangero.us" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
<a href="http://www.idangero.us/sliders/moover/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
<a href="http://www.idangero.us/index.php?content=cat_item&id=62" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
<a href="http://www.idangero.us/sliders/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
<a href="http://www.idangero.us/sliders/swiper/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
<a href="http://www.idangero.us/sliders/s6/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
<a href="http://www.idangero.us/cs/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/1.jpg)">
<a href="http://www.idangero.us" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/2.jpg)">
<a href="http://www.idangero.us/sliders/moover/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/3.jpg)">
<a href="http://www.idangero.us/index.php?content=cat_item&id=62" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/4.jpg)">
<a href="http://www.idangero.us/sliders/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/5.jpg)">
<a href="http://www.idangero.us/sliders/swiper/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/6.jpg)">
<a href="http://www.idangero.us/sliders/s6/" target="_blank"></a>
</div>
<div class="swiper-slide" style="background-image:url(img/big/7.jpg)">
<a href="http://www.idangero.us/cs/" target="_blank"></a>
</div>
</div>
</div>
<div class="swiper-container thumbs-cotnainer">
<div class="thumbs-title">New and interesting</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</div>
</div>
</div>
</div>
<div class="swiper-container banners-container border-gradient">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/1.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/2.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/3.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/4.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/5.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/6.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/7.jpg)"></div>
</div>
</div>
</div>
<div class="swiper-container thumbs-cotnainer border-gradient">
<div class="thumbs-title">Popular</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</div>
</div>
</div>
</div>
<div class="swiper-container banners-container border-gradient">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/1.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/2.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/3.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/4.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/5.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/6.jpg)"></div>
</div>
<div class="swiper-slide">
<div class="banner" style="background-image:url(img/big/7.jpg)"></div>
</div>
</div>
</div>
<div class="swiper-container thumbs-cotnainer border-gradient">
<div class="thumbs-title">Another Awesome Group</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/2.jpg" height="150" width="150" alt="">
<div class="app-title">Sleepless Night</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/1.jpg" height="150" width="150" alt="">
<div class="app-title">Avengers</div>
<div class="app-category">Movies</div>
<div class="app-price">$10</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/4.jpg" height="150" width="150" alt="">
<div class="app-title">Fire</div>
<div class="app-category">Games</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/6.jpg" height="150" width="150" alt="">
<div class="app-title">Dance All Night</div>
<div class="app-category">Music</div>
<div class="app-price">$7.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/3.jpg" height="150" width="150" alt="">
<div class="app-title">Seeking Justice</div>
<div class="app-category">Movies</div>
<div class="app-price">$15</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/8.jpg" height="150" width="150" alt="">
<div class="app-title">Two Guys</div>
<div class="app-category">Movies</div>
<div class="app-price">$14.99</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/5.jpg" height="150" width="150" alt="">
<div class="app-title">The Raid</div>
<div class="app-category">Music</div>
<div class="app-price">$5</div>
</div>
<div class="swiper-slide">
<img src="img/thumbs/7.jpg" height="150" width="150" alt="">
<div class="app-title">Jeff Who Lives At Home</div>
<div class="app-category">Movies</div>
<div class="app-price">$22.49</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.3dflow-2.0.js"></script>
<script src="js/appstore.js"></script>
</body>
</html>