- 복사한 그림
https://codepen.io/simoami/full/NxYMmv
//////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
<title>CodePen - Vertical Text Slider</title>
<link rel="canonical" href="https://codepen.io/simoami/pen/NxYMmv" />
<link href=' https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css ">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css'>
<style>
body {
background: #333333;
font-family: "Titillium Web", Helvetica, Arial;
font-size: 16px;
color: #eeeeee;
font-weight: 300;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
h1 {
font-size: 3rem;
margin-bottom: 3rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
h3 {
font-size: 1.5rem;
line-height: 3rem;
}
.container {
margin-top: 3rem;
text-align: center;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="container">
<h1>Find. Connect. Do.</h1>
<h2>Find and do a physical activity with someone in your area.</h2>
<div class="slider">
<h3>Take a leisurely jog in the park…together</h3>
<h3>Try a spin class...together</h3>
<h3>Take a bike ride around the city...together</h3>
<h3>Go for an indoor tennis practice...together</h3>
<h3>Try////////////////// a spin class...together</h3>
<h3>Take a bikeKKKKKKKKKKKK ride around the city...together</h3>
<h3>Go for an 000000000000000indoor tennis practice...together</h3>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
<script id="rendered-js" >
$('.slider').slick({
vertical: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300 });
//# sourceURL=pen.js
</script>
</body>
</html>