swiper
Version:
Mobile touch slider and framework with hardware accelerated transitions
235 lines (233 loc) • 10.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Swiper Movies App</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/movies-app.css">
</head>
<body>
<div class="swiper-container swiper-content">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">
<h1>Movie 1</h1>
<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 2</h1>
<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 3</h1>
<img class="movie-pic" src="img/3.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 4</h1>
<img class="movie-pic" src="img/4.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 5</h1>
<img class="movie-pic" src="img/5.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 6</h1>
<img class="movie-pic" src="img/6.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 7</h1>
<img class="movie-pic" src="img/7.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 8</h1>
<img class="movie-pic" src="img/8.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 9</h1>
<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 10</h1>
<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 11</h1>
<img class="movie-pic" src="img/3.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 12</h1>
<img class="movie-pic" src="img/4.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 13</h1>
<img class="movie-pic" src="img/5.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 14</h1>
<img class="movie-pic" src="img/6.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 15</h1>
<img class="movie-pic" src="img/7.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
<div class="swiper-slide">
<div class="inner">
<h1>Movie 16</h1>
<img class="movie-pic" src="img/8.jpg" height="150" width="150" alt="">
<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="swiper-container swiper-nav">
<div class="swiper-wrapper">
<div class="swiper-slide active-nav">
<span class="angle"></span>
<img src="img/1.jpg" alt="">
<div class="title">Movie 1</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/2.jpg" alt="">
<div class="title">Movie 2</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/3.jpg" alt="">
<div class="title">Movie 3</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/4.jpg" alt="">
<div class="title">Movie 4</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/5.jpg" alt="">
<div class="title">Movie 5 Long Title</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/6.jpg" alt="">
<div class="title">Movie 6</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/7.jpg" alt="">
<div class="title">Movie 7</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/8.jpg" alt="">
<div class="title">Movie 8</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/1.jpg" alt="">
<div class="title">Movie 9</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/2.jpg" alt="">
<div class="title">Movie 10</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/3.jpg" alt="">
<div class="title">Movie 11</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/4.jpg" alt="">
<div class="title">Movie 12</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/5.jpg" alt="">
<div class="title">Movie 13 Long Title</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/6.jpg" alt="">
<div class="title">Movie 14</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/7.jpg" alt="">
<div class="title">Movie 15</div>
</div>
<div class="swiper-slide">
<span class="angle"></span>
<img src="img/8.jpg" alt="">
<div class="title">Movie 16</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/movies-app.js"></script>
</body>
</html>