Skip to content

Instantly share code, notes, and snippets.

@wnas

wnas/index.html

Created August 15, 2017 13:36
Show Gist options
  • Save wnas/9664ac1b10da911b6036897cd61aa8bd to your computer and use it in GitHub Desktop.
Save wnas/9664ac1b10da911b6036897cd61aa8bd to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yizequs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.carousel,
.carousel__item,
.carousel__image {
width: 300px;
height: 300px;
padding: 0;
margin: 0;
}
.carousel {
overflow: hidden;
}
.carousel__item {
list-style: none;
outline :1px solid red;
}
.foo {
padding: 0;
}
.foo li {
list-style: none;
display: inline-block;
padding: 0;
}
.foo a {
display: block;
width: 75px;
height: 75px;
outline: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="sg-pattern-example">
<ul class="carousel">
<li class="carousel__item">
<img src="https://jsbin-user-assets.s3.amazonaws.com/wnas/meters.png" alt="default alt text1" class="carousel__image" id="a">
</li>
<li class="carousel__item">
<img src="https://jsbin-user-assets.s3.amazonaws.com/wnas/message.png" alt="default alt text2" class="carousel__image" id="b">
</li>
<li class="carousel__item">
<img src="https://jsbin-user-assets.s3.amazonaws.com/wnas/euro.png" alt="default alt text3" class="carousel__image" id="c">
</li>
<li class="carousel__item">
<img src="https://jsbin-user-assets.s3.amazonaws.com/wnas/heart.png" alt="default alt text4" class="carousel__image" id="d">
</li>
</ul>
<ul class="foo">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
</ul>
</div>
<script id="jsbin-source-css" type="text/css">
.carousel,
.carousel__item,
.carousel__image {
width: 300px;
height: 300px;
padding: 0;
margin: 0;
}
.carousel {
overflow: hidden;
}
.carousel__item {
list-style: none;
outline :1px solid red;
}
.foo {
padding: 0;
}
.foo li {
list-style: none;
display: inline-block;
padding: 0;
}
.foo a {
display: block;
width: 75px;
height: 75px;
outline: 1px solid #ccc;
}</script>
</body>
</html>
Raw
jsbin.yizequs.css
.carousel,
.carousel__item,
.carousel__image {
width: 300px;
height: 300px;
padding: 0;
margin: 0;
}
.carousel {
overflow: hidden;
}
.carousel__item {
list-style: none;
outline :1px solid red;
}
.foo {
padding: 0;
}
.foo li {
list-style: none;
display: inline-block;
padding: 0;
}
.foo a {
display: block;
width: 75px;
height: 75px;
outline: 1px solid #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment