-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathcustom-navigation.html
119 lines (104 loc) · 4.48 KB
/
custom-navigation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Custom navigation - macro-carousel demo</title>
<link rel="stylesheet" href="css/third-party/prism.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<h1 id="title">Custom navigation (previous/next buttons)</h1>
<a id="backToIndex" href="index.html">See all demos</a>
<template id="demoTemplate">
<style>
macro-carousel {
height: 300px;
padding: 80px 0 0;
margin: 0 10px;
/*
* It is possible to override the shape of the previous and next
* arrows by changing the --macro-carousel-navigation-icon-mask property. This
* property is used as a value for the `mask-image` CSS property.
* https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
*
* In this example, the new SVG mask has been optimised according to
* https://codepen.io/tigt/post/optimizing-svgs-in-data-uris.
* You can see the original SVG asset in /demo/images/arrow-left-alt.svg
*/
--macro-carousel-navigation-icon-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23000'%3E %3Cpath fill-rule='evenodd' d='M47 2L32 32l15 30-29-30L47 2z'/%3E %3C/svg%3E");
}
/* Previous and next buttons */
macro-carousel-nav-button.macro-carousel-previous,
macro-carousel-nav-button.macro-carousel-next {
--macro-carousel-navigation-color: #ff0844;
--macro-carousel-navigation-color-focus: #fff;
--macro-carousel-navigation-color-background: #ffe5dd;
--macro-carousel-navigation-color-background-focus: #ff0844;
--macro-carousel-navigation-button-size: 72px;
--macro-carousel-navigation-icon-size: 40px;
border-radius: 0;
border: 1px solid var(--macro-carousel-navigation-color);
/*
* By tweaking the `top` (and/or `bottom`) and the `transform` CSS
* properties, the navigation buttons can be vertically aligned in
* a different way (they are centered by default).
*/
transform: none !important;
top: 0 !important;
}
macro-carousel-nav-button.macro-carousel-previous {
left: auto;
right: var(--macro-carousel-navigation-button-size);
}
.slide {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #ffb199, #ff0844);
box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, .05);
color: white;
font-size: 5em;
font-family: sans-serif;
}
</style>
<!-- `navigation` adds previous and next buttons -->
<macro-carousel navigation>
<article class="slide">Slide 1</article>
<article class="slide">Slide 2</article>
<article class="slide">Slide 3</article>
<article class="slide">Slide 4</article>
</macro-carousel>
<p>If the CSS properties to customize the <code>macro-carousel</code> navigation buttons are not enough for your needs, you can always use any custom UI and call the <code>previous()</code> and <code>next()</code> functions.</p>
<button id="custom-previous">Custom previous button</button>
<button id="custom-next">Custom next button</button>
<script>
const slider = document.querySelector('macro-carousel');
const customPreviousBtn = document.querySelector('#custom-previous');
const customNextBtn = document.querySelector('#custom-next');
function onWCReady() {
customElements.whenDefined('macro-carousel').then(() => {
customPreviousBtn.addEventListener('click', () => {
slider.previous();
});
customNextBtn.addEventListener('click', () => {
slider.next();
});
});
};
// Initial setup.
if (window.WebComponents && window.WebComponents.ready === true) {
onWCReady();
} else {
window.addEventListener('WebComponentsReady', onWCReady);
}
</script>
</template>
<script defer src="js/third-party/inert.min.js"></script>
<script defer src="js/third-party/focus-visible.js"></script>
<script defer src="js/third-party/prism.js" data-manual></script>
<script defer src="js/third-party/webcomponents-bundle.js"></script>
<script defer src="js/demo.js"></script>
</body>
</html>