35 |
36 |
Even: {{ i + 1 }}
37 |
38 |
39 |
--------------------------------------------------------------------------------
/apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.component.scss:
--------------------------------------------------------------------------------
1 | .bannerStyle div {
2 | background-color: #ccc;
3 | background-size: cover !important;
4 | height: 100%;
5 | }
6 |
7 | .bannerStyle img {
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | .bannerStyle h1 {
13 | text-align: center;
14 | background: rgba(0, 0, 0, 0.32);
15 | color: white;
16 | margin: 0;
17 | height: 100%;
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | }
22 |
23 | .tile {
24 | min-height: 200px;
25 | background-color: #ccc;
26 | background-size: cover !important;
27 | }
28 |
29 | .tile h1 {
30 | text-align: center;
31 | line-height: 200px;
32 | background: rgba(0, 0, 0, 0.32);
33 | color: white;
34 | margin: 0;
35 | }
36 |
37 | h4 {
38 | margin: 0;
39 | padding: 10px 15px;
40 | text-align: center;
41 | }
42 |
43 | p {
44 | margin: 0;
45 | padding: 0 15px 10px;
46 | text-align: center;
47 | }
48 |
49 | .wBg {
50 | background: white;
51 | }
52 |
53 | .container {
54 | max-width: 1200px;
55 | margin: 0 auto;
56 | }
57 |
58 | nav {
59 | border-bottom: 1px solid #ccc;
60 | position: fixed;
61 | width: 100%;
62 | top: 0;
63 | background: white;
64 | z-index: 12;
65 | }
66 |
67 | nav h1 {
68 | margin: 0;
69 | padding: 10px;
70 | text-align: center;
71 | }
72 |
73 | .carBtn {
74 | position: absolute;
75 | margin: auto;
76 | top: 0;
77 | bottom: 0;
78 | width: 50px;
79 | height: 50px;
80 | box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
81 | border-radius: 999px;
82 | }
83 |
84 | .leftRs {
85 | position: absolute;
86 | margin: auto;
87 | top: 0;
88 | bottom: 0;
89 | width: 50px;
90 | height: 50px;
91 | box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
92 | border-radius: 999px;
93 | left: 0;
94 | z-index: 1;
95 | }
96 |
97 | .rightRs {
98 | position: absolute;
99 | margin: auto;
100 | top: 0;
101 | bottom: 0;
102 | width: 50px;
103 | height: 50px;
104 | box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
105 | border-radius: 999px;
106 | right: 0;
107 | z-index: 1;
108 | }
109 |
110 | .leftRs1 {
111 | position: absolute;
112 | margin: auto;
113 | top: 0;
114 | bottom: 0;
115 | width: 50px;
116 | height: 50px;
117 | box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
118 | border-radius: 999px;
119 | right: 0;
120 | }
121 |
122 | .rightRs1 {
123 | position: absolute;
124 | margin: auto;
125 | top: 0;
126 | bottom: 0;
127 | width: 50px;
128 | height: 50px;
129 | box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
130 | border-radius: 999px;
131 | left: 0;
132 | }
133 |
134 | .myPoint {
135 | list-style-type: none;
136 | text-align: center;
137 | padding: 12px;
138 | margin: 0;
139 | white-space: nowrap;
140 | overflow: auto;
141 | box-sizing: border-box;
142 | li {
143 | display: inline-block;
144 | border-radius: 50%;
145 | border: 2px solid rgba(0, 0, 0, 0.55);
146 | padding: 4px;
147 | margin: 0 3px;
148 | transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
149 | transition: 0.4s;
150 | &.active {
151 | background: #6b6b6b;
152 | transform: scale(1.2);
153 | }
154 | }
155 | }
156 |
157 | .carouselHoved {
158 | opacity: 0.4;
159 | }
160 |
161 | .myBannerPoint {
162 | position: absolute;
163 | display: -webkit-box;
164 | display: -ms-flexbox;
165 | display: flex;
166 | width: 100%;
167 | left: 0;
168 | bottom: 0;
169 | padding: 0;
170 | color: beige;
171 | justify-content: center;
172 | list-style-type: none;
173 | background: rgba(0, 0, 0, 0.34);
174 | margin: 0;
175 | padding: 10px;
176 | box-sizing: border-box;
177 | li {
178 | background: #6b6b6b;
179 | width: 50px;
180 | height: 50px;
181 | margin-right: 10px;
182 | &.active {
183 | transform: translateY(-10px);
184 | transition: 0.3s ease all;
185 | }
186 | }
187 | }
188 |
--------------------------------------------------------------------------------
/apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2 | import { NguCarouselConfig } from '@ngu/carousel';
3 | import { slider } from '../../slide-animation';
4 | import { NgTemplateOutlet } from '@angular/common';
5 | import {
6 | NguTileComponent,
7 | NguCarouselPrevDirective,
8 | NguCarouselDefDirective,
9 | NguCarouselNextDirective,
10 | NguCarousel
11 | } from '@ngu/carousel';
12 |
13 | @Component({
14 | selector: 'app-wrapped-carousel',
15 | templateUrl: 'wrapped-carousel.component.html',
16 | styleUrls: ['./wrapped-carousel.component.scss'],
17 | changeDetection: ChangeDetectionStrategy.OnPush,
18 | animations: [slider],
19 | imports: [
20 | NguCarousel,
21 | NguCarouselPrevDirective,
22 | NguCarouselDefDirective,
23 | NguTileComponent,
24 | NgTemplateOutlet,
25 | NguCarouselNextDirective
26 | ]
27 | })
28 | export class WrappedCarouselComponent {
29 | items = input