jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-21 14:41:49 +03:00
parent 4ae129054e
commit ab9ab64bd5
476 changed files with 3370 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

17
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md Normal file
View file

@ -0,0 +1,17 @@
The images ribbon can be represented as `ul/li` list of images `<img>`.
Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
![](carousel1.png)
To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
![](carousel2.png)
The outer `<div>` has a fixed width, so "extra" images are cut.
The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.

65
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="carousel" class="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
<script>
/* label the images, just for convenience, to visually track them */
let i = 1;
for(let li of carousel.querySelectorAll('li')) {
li.style.position = 'relative';
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
i++;
}
/* configuration */
let width = 130; // image width
let count = 3; // visible images count
let list = carousel.querySelector('ul');
let listElems = carousel.querySelectorAll('li');
let position = 0; // ribbon scroll position
carousel.querySelector('.prev').onclick = function() {
// shift left
position += width * count;
// can't move to the left too much, end of images
position = Math.min(position, 0)
list.style.marginLeft = position + 'px';
};
carousel.querySelector('.next').onclick = function() {
// shift right
position -= width * count;
// can only shift the ribbbon for (total ribbon length - visible count) images
position = Math.max(position, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};
</script>
</body>
</html>

70
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css Normal file
View file

@ -0,0 +1,70 @@
body {
padding: 10px;
}
.carousel {
position: relative;
width: 398px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
.carousel img {
width: 130px;
height: 130px;
/* make it block to remove space around images */
display: block;
}
.arrow {
position: absolute;
top: 60px;
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
.prev {
left: 7px;
}
.next {
right: 7px;
}
.gallery {
width: 390px;
overflow: hidden;
}
.gallery ul {
height: 130px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 250ms;
/* remove white-space between inline-block'ed li */
/* http://davidwalsh.name/remove-whitespace-inline-block */
font-size: 0;
}
.gallery li {
display: inline-block;
}

44
2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- create your markup and styles -->
<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
<ul>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
<script>
// label the images to visually track them, just for convenience,
// this code can be removed
let i = 1;
for(let li of carousel.querySelectorAll('li')) {
li.style.position = 'relative';
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
i++;
}
// ...your code to make carousel alive!
</script>
</body>
</html>

38
2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css Normal file
View file

@ -0,0 +1,38 @@
.arrow {
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
ul {
height: 130px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul img {
width: 130px;
height: 130px;
display: block; /* removes extra space near images */
}
ul li {
display: inline-block; /* removes extra space between list items
}

13
2-ui/2-events/01-introduction-browser-events/07-carousel/task.md Normal file
View file

@ -0,0 +1,13 @@
importance: 4
---
# Carousel
Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows.
[iframe height=200 src="solution"]
Later we can add more features to it: infinite scrolling, dynamic loading etc.
P.S. For this task HTML/CSS structure is actually 90% of the solution.