Skip to content

Instantly share code, notes, and snippets.

@chenyang48671155

chenyang48671155/index.html

Created June 12, 2018 03:27
Show Gist options
  • Save chenyang48671155/cdb8e50782a179301ac6fad086059c5b to your computer and use it in GitHub Desktop.
Save chenyang48671155/cdb8e50782a179301ac6fad086059c5b to your computer and use it in GitHub Desktop.
Download ZIP
Swiper Cards
Raw
index.html
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content">
<div class="hero new-york">
<div class="calendar">
<span class="date">
27
</span>
<span class="month">
MAR
</span>
</div>
<div class="photo-btn">
<div class="text">Photos
</div>
<div class="gallery">
<div class="row top">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row middle">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row bottom">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
</div>
</div>
</div>
<div class="copy">
<h1>New York City</h1>
<h3>The city that never sleeps.</h3>
<p>Situated on one of the world's largest natural harbors, New York City consists of five boroughs, each of which is a separate county of the State of New York. The five boroughs – Brooklyn, Queens, Manhattan, The Bronx, and Staten Island – were consolidated into a single city in 1898. Also, Taryn lives here.</p>
<div class="footer">
<div class="time">
<div><i class="fas fa-clock fa-fw"></i> 6 mins ago</div>
</div>
<div class="comments">
<div><i class="fas fa-comments fa-fw"></i> 39 comments</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content">
<div class="hero san-fran">
<div class="calendar">
<span class="date">
28
</span>
<span class="month">
MAR
</span>
</div>
<div class="photo-btn">
<div class="text">Photos
</div>
<div class="gallery">
<div class="row top">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row middle">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row bottom">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
</div>
</div>
</div>
<div class="copy">
<h1>San Francisco</h1>
<h3>The City by the Bay.</h3>
<p>Situated on a peninsula separating San Francisco Bay from the Pacific Ocean, San Francisco is a uniquely picturesque city, whose scenic attractions include the largest cultivated urban park in the country, Golden Gate Park.</p>
<div class="footer">
<div class="time">
<div><i class="fas fa-clock fa-fw"></i> 12 mins ago</div>
</div>
<div class="comments">
<div><i class="fas fa-comments fa-fw"></i> 64 comments</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content">
<div class="hero chicago">
<div class="calendar">
<span class="date">
29
</span>
<span class="month">
MAR
</span>
</div>
<div class="photo-btn">
<div class="text">Photos
</div>
<div class="gallery">
<div class="row top">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row middle">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
<div class="row bottom">
<div class="image one">
</div>
<div class="image two">
</div>
<div class="image three">
</div>
</div>
</div>
</div>
</div>
<div class="copy">
<h1>Chicago</h1>
<h3>The windy city.</h3>
<p>Located in northeastern Illinois on the southwestern shores of Lake Michigan. It is the principal city in the Chicago Metropolitan Area, situated in the Midwestern United States and the Great Lakes region.</p>
<div class="footer">
<div class="time">
<div><i class="fas fa-clock fa-fw"></i> 18 mins ago</div>
</div>
<div class="comments">
<div><i class="fas fa-comments fa-fw"></i> 102 comments</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Raw
script.js
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.scss
body {
background: #222;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8rem;
padding: 0;
margin: 0 10px 0 0;
}
h3 {
font-size: 1.3rem;
padding: 0;
margin: 5px 0 15px 0;
color: darkred;
}
p {
padding: 0;
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
color: graytext;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
width: 400px;
height: 500px;
padding: 5px;
}
.swiper-content {
background-color: #fff;
width: 100%;
height: 100%;
.hero {
width: 100%;
height: 175px;
position: relative;
.calendar {
width: 60px;
height: 60px;
float: right;
background-color: darkred;
border-radius: 50%;
margin-right: 15px;
margin-top: 15px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.date {
font-size: 1.2rem;
line-height: 1.3rem;
}
.month {
font-size: .8rem;
}
}
.photo-btn {
position: absolute;
bottom: 0;
width: 100px;
height: 40px;
background-color: darkred;
border: none;
font-size: 1.2rem;
font-weight: bold;
color: #fff;
transition: .2s all;
cursor: pointer;
display: flex;
align-content: center;
justify-content: center;
&:hover {
width: 100%;
height: 100%;
transition: .2s all;
.text {
display: none;
}
.gallery {
display: flex;
}
}
.text {
text-align: center;
line-height: 40px;
}
.gallery {
width: 100%;
display: none;
flex-direction: column;
.row {
width: 100%;
height: 34%;
display: flex;
.image {
opacity: .6;
width: 34%;
height: 100%;
display: inline-block;
transition: .2s all;
&:hover {
opacity: 1;
transition: .2s all;
}
}
}
}
}
&.new-york {
background: url("https://daytripsontario.files.wordpress.com/2017/03/img_6859-copy.jpg");
background-position: center;
background-size: cover;
.top {
.image {
&.one {
background: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://medicalcannabiscultivation.com/wp-content/uploads/2018/03/NY.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://www.nycgo.com/images/made/images/uploads/articles/NYC_in_3_Days/TimesSquare-TaggerYanceyIV_900_600_70.jpg");
background-size: cover;
background-position: center;
}
}
}
.middle {
.image {
&.one {
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRS7O-nPTS9BLCUX-uV1jihGs2QetTViwoOhUK0jctN6QLhITWCKA");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://cdn.vox-cdn.com/thumbor/L9EthniNFveihyyk7EQSOhsx9_8=/0x0:3000x2002/1200x800/filters:focal(1260x761:1740x1241)/cdn.vox-cdn.com/uploads/chorus_image/image/55473705/uppereastside.0.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://www.nps.gov/subjects/urban/images/new-york.JPG?maxwidth=1200&maxheight=1200&autorotate=false");
background-size: cover;
background-position: center;
}
}
}
.bottom {
.image {
&.one {
background: url("https://d1v5vpeyrmf36z.cloudfront.net/media/CACHE/images/image-previews/squares/Tishman_RC_AttactionModule_600x600/1eb15b14cfbb90dba0e3813bc8193580.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1");
background-size: cover;
background-position: center;
}
&.three {
background: url("http://static1.squarespace.com/static/5813cddb8419c25c3b42eacd/5813e156414fb51499dfe55c/58670bbb197aea5283327c61/1488664764289/?format=1000w");
background-size: cover;
background-position: center;
}
}
}
}
&.san-fran {
background: url("http://s3.envato.com/files/241747423/20171202-North-Beach-p4p-0197-4mp.jpg");
background-position: center;
background-size: cover;
.top {
.image {
&.one {
background: url("https://cdn.vox-cdn.com/thumbor/nkA0OYFOejA96gXee5DQG9RZVFk=/0x0:1368x912/1200x800/filters:focal(575x347:793x565)/cdn.vox-cdn.com/uploads/chorus_image/image/55144679/Pius_Lee.0.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzWjZw4b1U4dttrxI7n1GZKiJ3hkQxl8d3bHcXlo0a7v89a-NpHw");
background-size: cover;
background-position: center;
}
&.three {
background: url("http://assets.fodors.com/destinations/54494/alamo-square-san-francisco-california-usa_main.jpg");
background-size: cover;
background-position: center;
}
}
}
.middle {
.image {
&.one {
background: url("https://cdn-images-1.medium.com/max/800/1*J0Znftz9w-YEdOSILoV6kw.jpeg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://www.jetblue.com/img/vacations/destination/San-Francisco-960-x-420.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://az616578.vo.msecnd.net/files/2016/05/16/635989831137616837-380923038_san-francisco-real-estate-market-trends-3.jpg");
background-size: cover;
background-position: center;
}
}
}
.bottom {
.image {
&.one {
background: url("http://s79f01z693v3ecoes3yyjsg1.wpengine.netdna-cdn.com/wp-content/uploads/2016/12/sf.IDriveSF.1230.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://www.smartdestinations.com/img/pt/dest/Sfo/att/Sfo_Att_Hop_On_Hop_Off_Classic_Tour_1_Day_Ticket/gallery/Hop-On-Hop-Off-Classic-Tour-1-Day-Ticket-1.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/San_Francisco_%28Evening%29.jpg/1200px-San_Francisco_%28Evening%29.jpg");
background-size: cover;
background-position: center;
}
}
}
}
&.chicago {
background: url("https://i2.wp.com/www.maven.co/wp-content/uploads/2014/07/Chicago-Skyline.jpg?ssl=1");
background-position: center;
background-size: cover;
.top {
.image {
&.one {
background: url("http://www.chicagobusiness.com/apps/pbcsi.dll/storyimage/CG/20180118/NEWS07/180119900/AR/0/amazon-hq2-chicago.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://chicagoinnovation.com//wp-content/uploads/2017/10/chicago_innovation_mission_video_screenshot.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("http://www.monaco-chicago.com/images/1700-960/chicago-skyline-f81e26ea.jpg");
background-size: cover;
background-position: center;
}
}
}
.middle {
.image {
&.one {
background: url("https://www.visittheusa.co.uk/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2018-05/2af94a274ebf7f6716f9b2068595581c.jpeg?itok=E4aYJ2RV");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://3hkj9i2chtjx336clgvx1skh-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/DowntownChicago_BodyImage.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/chicago/01-city-landing/View-Of-Chicago-Oak-St-Beach-Lake-Michigan.jpg");
background-size: cover;
background-position: center;
}
}
}
.bottom {
.image {
&.one {
background: url("https://tt-wp-insider.imgix.net/2018/04/chicago-oak-street-beach-downtown.jpg");
background-size: cover;
background-position: center;
}
&.two {
background: url("https://img.buzzfeed.com/buzzfeed-static/static/2014-03/campaign_images/webdr06/27/23/50-things-you-probably-didnt-know-about-chicago-2-16837-1395978386-4_dblbig.jpg");
background-size: cover;
background-position: center;
}
&.three {
background: url("https://www.martplaza.com/resourcefiles/things-to-do-slider-slider/navy-pier-at-chicago-th.jpg");
background-size: cover;
background-position: center;
}
}
}
}
}
.copy {
padding: 20px;
}
.footer {
position: absolute;
bottom: 0;
margin-bottom: 35px;
color: graytext;
.time {
display: inline-block;
}
.comments {
display: inline-block;
margin-left: 20px;
cursor: pointer;
transition: .2s all;
&:hover {
color: darkred;
transition: .2s all;
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
Raw
swiper-cards.markdown

Swiper Cards

Codepen Challenge June 2018 Week 1. Swipeable card design with idangero.us/swiper/.

A Pen by Chenyang on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment