├── .gitattributes
├── .gitignore
├── BlazorCarousel.sln
├── Component
├── Carousel.razor
├── Components.csproj
├── ImageFile.cs
├── TemplatedCarousel.razor
├── _Imports.razor
└── wwwroot
│ └── blazorcarousel.css
├── ComponentsSampleSite
├── App.razor
├── ComponentsSampleSite.csproj
├── Pages
│ ├── CarouselSample.razor
│ ├── Error.razor
│ ├── Index.razor
│ ├── TemplatedCarouselSample.razor
│ └── _Host.cshtml
├── Program.cs
├── Properties
│ └── launchSettings.json
├── Shared
│ ├── MainLayout.razor
│ └── NavMenu.razor
├── Startup.cs
├── _Imports.razor
├── appsettings.Development.json
├── appsettings.json
└── wwwroot
│ ├── Assets
│ ├── Kitten1.png
│ ├── Kitten2.png
│ ├── Kitten3.png
│ └── Kitten4.png
│ ├── css
│ ├── bootstrap
│ │ ├── bootstrap.min.css
│ │ └── bootstrap.min.css.map
│ ├── open-iconic
│ │ ├── FONT-LICENSE
│ │ ├── ICON-LICENSE
│ │ ├── README.md
│ │ └── font
│ │ │ ├── css
│ │ │ └── open-iconic-bootstrap.min.css
│ │ │ └── fonts
│ │ │ ├── open-iconic.eot
│ │ │ ├── open-iconic.otf
│ │ │ ├── open-iconic.svg
│ │ │ ├── open-iconic.ttf
│ │ │ └── open-iconic.woff
│ └── site.css
│ └── favicon.ico
├── LICENSE
└── README.md
/.gitattributes:
--------------------------------------------------------------------------------
1 | ###############################################################################
2 | # Set default behavior to automatically normalize line endings.
3 | ###############################################################################
4 | * text=auto
5 |
6 | ###############################################################################
7 | # Set default behavior for command prompt diff.
8 | #
9 | # This is need for earlier builds of msysgit that does not have it on by
10 | # default for csharp files.
11 | # Note: This is only used by command line
12 | ###############################################################################
13 | #*.cs diff=csharp
14 |
15 | ###############################################################################
16 | # Set the merge driver for project and solution files
17 | #
18 | # Merging from the command prompt will add diff markers to the files if there
19 | # are conflicts (Merging from VS is not affected by the settings below, in VS
20 | # the diff markers are never inserted). Diff markers may cause the following
21 | # file extensions to fail to load in VS. An alternative would be to treat
22 | # these files as binary and thus will always conflict and require user
23 | # intervention with every merge. To do so, just uncomment the entries below
24 | ###############################################################################
25 | #*.sln merge=binary
26 | #*.csproj merge=binary
27 | #*.vbproj merge=binary
28 | #*.vcxproj merge=binary
29 | #*.vcproj merge=binary
30 | #*.dbproj merge=binary
31 | #*.fsproj merge=binary
32 | #*.lsproj merge=binary
33 | #*.wixproj merge=binary
34 | #*.modelproj merge=binary
35 | #*.sqlproj merge=binary
36 | #*.wwaproj merge=binary
37 |
38 | ###############################################################################
39 | # behavior for image files
40 | #
41 | # image files are treated as binary by default.
42 | ###############################################################################
43 | #*.jpg binary
44 | #*.png binary
45 | #*.gif binary
46 |
47 | ###############################################################################
48 | # diff behavior for common document formats
49 | #
50 | # Convert binary document formats to text before diffing them. This feature
51 | # is only available from the command line. Turn it on by uncommenting the
52 | # entries below.
53 | ###############################################################################
54 | #*.doc diff=astextplain
55 | #*.DOC diff=astextplain
56 | #*.docx diff=astextplain
57 | #*.DOCX diff=astextplain
58 | #*.dot diff=astextplain
59 | #*.DOT diff=astextplain
60 | #*.pdf diff=astextplain
61 | #*.PDF diff=astextplain
62 | #*.rtf diff=astextplain
63 | #*.RTF diff=astextplain
64 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ## Ignore Visual Studio temporary files, build results, and
2 | ## files generated by popular Visual Studio add-ons.
3 | ##
4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
5 |
6 | # User-specific files
7 | *.rsuser
8 | *.suo
9 | *.user
10 | *.userosscache
11 | *.sln.docstates
12 |
13 | # User-specific files (MonoDevelop/Xamarin Studio)
14 | *.userprefs
15 |
16 | # Build results
17 | [Dd]ebug/
18 | [Dd]ebugPublic/
19 | [Rr]elease/
20 | [Rr]eleases/
21 | x64/
22 | x86/
23 | [Aa][Rr][Mm]/
24 | [Aa][Rr][Mm]64/
25 | bld/
26 | [Bb]in/
27 | [Oo]bj/
28 | [Ll]og/
29 |
30 | # Visual Studio 2015/2017 cache/options directory
31 | .vs/
32 | # Uncomment if you have tasks that create the project's static files in wwwroot
33 | #wwwroot/
34 |
35 | # Visual Studio 2017 auto generated files
36 | Generated\ Files/
37 |
38 | # MSTest test Results
39 | [Tt]est[Rr]esult*/
40 | [Bb]uild[Ll]og.*
41 |
42 | # NUNIT
43 | *.VisualState.xml
44 | TestResult.xml
45 |
46 | # Build Results of an ATL Project
47 | [Dd]ebugPS/
48 | [Rr]eleasePS/
49 | dlldata.c
50 |
51 | # Benchmark Results
52 | BenchmarkDotNet.Artifacts/
53 |
54 | # .NET Core
55 | project.lock.json
56 | project.fragment.lock.json
57 | artifacts/
58 |
59 | # StyleCop
60 | StyleCopReport.xml
61 |
62 | # Files built by Visual Studio
63 | *_i.c
64 | *_p.c
65 | *_h.h
66 | *.ilk
67 | *.meta
68 | *.obj
69 | *.iobj
70 | *.pch
71 | *.pdb
72 | *.ipdb
73 | *.pgc
74 | *.pgd
75 | *.rsp
76 | *.sbr
77 | *.tlb
78 | *.tli
79 | *.tlh
80 | *.tmp
81 | *.tmp_proj
82 | *_wpftmp.csproj
83 | *.log
84 | *.vspscc
85 | *.vssscc
86 | .builds
87 | *.pidb
88 | *.svclog
89 | *.scc
90 |
91 | # Chutzpah Test files
92 | _Chutzpah*
93 |
94 | # Visual C++ cache files
95 | ipch/
96 | *.aps
97 | *.ncb
98 | *.opendb
99 | *.opensdf
100 | *.sdf
101 | *.cachefile
102 | *.VC.db
103 | *.VC.VC.opendb
104 |
105 | # Visual Studio profiler
106 | *.psess
107 | *.vsp
108 | *.vspx
109 | *.sap
110 |
111 | # Visual Studio Trace Files
112 | *.e2e
113 |
114 | # TFS 2012 Local Workspace
115 | $tf/
116 |
117 | # Guidance Automation Toolkit
118 | *.gpState
119 |
120 | # ReSharper is a .NET coding add-in
121 | _ReSharper*/
122 | *.[Rr]e[Ss]harper
123 | *.DotSettings.user
124 |
125 | # JustCode is a .NET coding add-in
126 | .JustCode
127 |
128 | # TeamCity is a build add-in
129 | _TeamCity*
130 |
131 | # DotCover is a Code Coverage Tool
132 | *.dotCover
133 |
134 | # AxoCover is a Code Coverage Tool
135 | .axoCover/*
136 | !.axoCover/settings.json
137 |
138 | # Visual Studio code coverage results
139 | *.coverage
140 | *.coveragexml
141 |
142 | # NCrunch
143 | _NCrunch_*
144 | .*crunch*.local.xml
145 | nCrunchTemp_*
146 |
147 | # MightyMoose
148 | *.mm.*
149 | AutoTest.Net/
150 |
151 | # Web workbench (sass)
152 | .sass-cache/
153 |
154 | # Installshield output folder
155 | [Ee]xpress/
156 |
157 | # DocProject is a documentation generator add-in
158 | DocProject/buildhelp/
159 | DocProject/Help/*.HxT
160 | DocProject/Help/*.HxC
161 | DocProject/Help/*.hhc
162 | DocProject/Help/*.hhk
163 | DocProject/Help/*.hhp
164 | DocProject/Help/Html2
165 | DocProject/Help/html
166 |
167 | # Click-Once directory
168 | publish/
169 |
170 | # Publish Web Output
171 | *.[Pp]ublish.xml
172 | *.azurePubxml
173 | # Note: Comment the next line if you want to checkin your web deploy settings,
174 | # but database connection strings (with potential passwords) will be unencrypted
175 | *.pubxml
176 | *.publishproj
177 |
178 | # Microsoft Azure Web App publish settings. Comment the next line if you want to
179 | # checkin your Azure Web App publish settings, but sensitive information contained
180 | # in these scripts will be unencrypted
181 | PublishScripts/
182 |
183 | # NuGet Packages
184 | *.nupkg
185 | # The packages folder can be ignored because of Package Restore
186 | **/[Pp]ackages/*
187 | # except build/, which is used as an MSBuild target.
188 | !**/[Pp]ackages/build/
189 | # Uncomment if necessary however generally it will be regenerated when needed
190 | #!**/[Pp]ackages/repositories.config
191 | # NuGet v3's project.json files produces more ignorable files
192 | *.nuget.props
193 | *.nuget.targets
194 |
195 | # Microsoft Azure Build Output
196 | csx/
197 | *.build.csdef
198 |
199 | # Microsoft Azure Emulator
200 | ecf/
201 | rcf/
202 |
203 | # Windows Store app package directories and files
204 | AppPackages/
205 | BundleArtifacts/
206 | Package.StoreAssociation.xml
207 | _pkginfo.txt
208 | *.appx
209 |
210 | # Visual Studio cache files
211 | # files ending in .cache can be ignored
212 | *.[Cc]ache
213 | # but keep track of directories ending in .cache
214 | !?*.[Cc]ache/
215 |
216 | # Others
217 | ClientBin/
218 | ~$*
219 | *~
220 | *.dbmdl
221 | *.dbproj.schemaview
222 | *.jfm
223 | *.pfx
224 | *.publishsettings
225 | orleans.codegen.cs
226 |
227 | # Including strong name files can present a security risk
228 | # (https://github.com/github/gitignore/pull/2483#issue-259490424)
229 | #*.snk
230 |
231 | # Since there are multiple workflows, uncomment next line to ignore bower_components
232 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
233 | #bower_components/
234 |
235 | # RIA/Silverlight projects
236 | Generated_Code/
237 |
238 | # Backup & report files from converting an old project file
239 | # to a newer Visual Studio version. Backup files are not needed,
240 | # because we have git ;-)
241 | _UpgradeReport_Files/
242 | Backup*/
243 | UpgradeLog*.XML
244 | UpgradeLog*.htm
245 | ServiceFabricBackup/
246 | *.rptproj.bak
247 |
248 | # SQL Server files
249 | *.mdf
250 | *.ldf
251 | *.ndf
252 |
253 | # Business Intelligence projects
254 | *.rdl.data
255 | *.bim.layout
256 | *.bim_*.settings
257 | *.rptproj.rsuser
258 | *- Backup*.rdl
259 |
260 | # Microsoft Fakes
261 | FakesAssemblies/
262 |
263 | # GhostDoc plugin setting file
264 | *.GhostDoc.xml
265 |
266 | # Node.js Tools for Visual Studio
267 | .ntvs_analysis.dat
268 | node_modules/
269 |
270 | # Visual Studio 6 build log
271 | *.plg
272 |
273 | # Visual Studio 6 workspace options file
274 | *.opt
275 |
276 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
277 | *.vbw
278 |
279 | # Visual Studio LightSwitch build output
280 | **/*.HTMLClient/GeneratedArtifacts
281 | **/*.DesktopClient/GeneratedArtifacts
282 | **/*.DesktopClient/ModelManifest.xml
283 | **/*.Server/GeneratedArtifacts
284 | **/*.Server/ModelManifest.xml
285 | _Pvt_Extensions
286 |
287 | # Paket dependency manager
288 | .paket/paket.exe
289 | paket-files/
290 |
291 | # FAKE - F# Make
292 | .fake/
293 |
294 | # JetBrains Rider
295 | .idea/
296 | *.sln.iml
297 |
298 | # CodeRush personal settings
299 | .cr/personal
300 |
301 | # Python Tools for Visual Studio (PTVS)
302 | __pycache__/
303 | *.pyc
304 |
305 | # Cake - Uncomment if you are using it
306 | # tools/**
307 | # !tools/packages.config
308 |
309 | # Tabs Studio
310 | *.tss
311 |
312 | # Telerik's JustMock configuration file
313 | *.jmconfig
314 |
315 | # BizTalk build output
316 | *.btp.cs
317 | *.btm.cs
318 | *.odx.cs
319 | *.xsd.cs
320 |
321 | # OpenCover UI analysis results
322 | OpenCover/
323 |
324 | # Azure Stream Analytics local run output
325 | ASALocalRun/
326 |
327 | # MSBuild Binary and Structured Log
328 | *.binlog
329 |
330 | # NVidia Nsight GPU debugger configuration file
331 | *.nvuser
332 |
333 | # MFractors (Xamarin productivity tool) working folder
334 | .mfractor/
335 |
336 | # Local History for Visual Studio
337 | .localhistory/
338 |
339 | # BeatPulse healthcheck temp database
340 | healthchecksdb
--------------------------------------------------------------------------------
/BlazorCarousel.sln:
--------------------------------------------------------------------------------
1 |
2 | Microsoft Visual Studio Solution File, Format Version 12.00
3 | # Visual Studio Version 16
4 | VisualStudioVersion = 16.0.29806.167
5 | MinimumVisualStudioVersion = 10.0.40219.1
6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Components", "Component\Components.csproj", "{6EFA6B16-02BF-4A63-BB15-A76E7538D1EE}"
7 | EndProject
8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ComponentsSampleSite", "ComponentsSampleSite\ComponentsSampleSite.csproj", "{96F472DD-AB00-4496-B8F1-CDA1F5542DEB}"
9 | EndProject
10 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{58668C2A-2F8D-4293-B581-8F652363132B}"
11 | ProjectSection(SolutionItems) = preProject
12 | README.md = README.md
13 | EndProjectSection
14 | EndProject
15 | Global
16 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
17 | Debug|Any CPU = Debug|Any CPU
18 | Release|Any CPU = Release|Any CPU
19 | EndGlobalSection
20 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
21 | {6EFA6B16-02BF-4A63-BB15-A76E7538D1EE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
22 | {6EFA6B16-02BF-4A63-BB15-A76E7538D1EE}.Debug|Any CPU.Build.0 = Debug|Any CPU
23 | {6EFA6B16-02BF-4A63-BB15-A76E7538D1EE}.Release|Any CPU.ActiveCfg = Release|Any CPU
24 | {6EFA6B16-02BF-4A63-BB15-A76E7538D1EE}.Release|Any CPU.Build.0 = Release|Any CPU
25 | {96F472DD-AB00-4496-B8F1-CDA1F5542DEB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
26 | {96F472DD-AB00-4496-B8F1-CDA1F5542DEB}.Debug|Any CPU.Build.0 = Debug|Any CPU
27 | {96F472DD-AB00-4496-B8F1-CDA1F5542DEB}.Release|Any CPU.ActiveCfg = Release|Any CPU
28 | {96F472DD-AB00-4496-B8F1-CDA1F5542DEB}.Release|Any CPU.Build.0 = Release|Any CPU
29 | EndGlobalSection
30 | GlobalSection(SolutionProperties) = preSolution
31 | HideSolutionNode = FALSE
32 | EndGlobalSection
33 | GlobalSection(ExtensibilityGlobals) = postSolution
34 | SolutionGuid = {F5F5BD99-EEB7-4188-BD88-6B82CCAF5DD5}
35 | EndGlobalSection
36 | EndGlobal
37 |
--------------------------------------------------------------------------------
/Component/Carousel.razor:
--------------------------------------------------------------------------------
1 | @using System.Timers;
2 |
3 |
4 | @if (imageset != null)
5 | {
6 |
7 | @foreach (var imageFile in imageset)
8 | {
9 |
10 |
{ OnCarouselItemClicked?.Invoke(this, _activeImageIndex); }">
11 |
12 | }
13 |
14 | @ResetRenderCounter();
15 |
16 |
17 | @if (ShowNavigation)
18 | {
19 |
20 |
21 |
22 | @if (_activeImageIndex > 0 && imageset.Count() > 1)
23 | {
24 |
25 |
26 |
27 | }
28 |
29 |
30 |
31 |
32 |
33 | @for (int indicatorIndex = 0; indicatorIndex < imageset.Count; indicatorIndex++)
34 | {
35 | int copiedIndex = indicatorIndex;
36 | SetActiveImageIndex(copiedIndex)" blazor-indicator-index="@_carouselRenderIndex">
37 | }
38 |
39 |
40 |
41 |
42 |
43 | @if (_activeImageIndex < imageset.Count() - 1 && imageset.Count() > 1)
44 | {
45 |
46 |
47 |
48 | }
49 |
50 |
51 |
52 |
53 | @ResetRenderCounter();
54 | }
55 | }
56 |
57 |
58 |
59 | @code {
60 |
61 | [Parameter]
62 | public string id { get; set; }
63 |
64 | [Parameter]
65 | public List imageset { get; set; }
66 |
67 | [Parameter]
68 | public string name { get; set; }
69 |
70 | [Parameter]
71 | public string CssClass { get; set; }
72 |
73 | [Parameter]
74 | public string ImageClass { get; set; }
75 |
76 | [Parameter]
77 | public int? AutoScrollInterval { get; set; }
78 |
79 | public delegate void CarouselItemClicked(object sender, int index);
80 |
81 | [Parameter]
82 | public CarouselItemClicked OnCarouselItemClicked { get; set; }
83 |
84 | [Parameter]
85 | public bool ShowNavigation { get; set; } = true;
86 |
87 | private int _carouselRenderIndex = -1;
88 | private int _activeImageIndex = 0;
89 | private Timer _scrollTimer = null;
90 |
91 | protected override async Task OnParametersSetAsync()
92 | {
93 | if ((this.AutoScrollInterval ?? 0) > 0)
94 | {
95 |
96 | int scrollMilliseconds = ((int)(this.AutoScrollInterval)) * 1000;
97 |
98 | _scrollTimer?.Stop();
99 |
100 | if (_scrollTimer == null)
101 | {
102 | _scrollTimer = new Timer();
103 | _scrollTimer.Elapsed += (o, e) =>
104 | {
105 |
106 | _activeImageIndex += 1;
107 |
108 | if (_activeImageIndex > (imageset?.Count - 1 ?? 0))
109 | {
110 | _activeImageIndex = 0;
111 | }
112 |
113 | this.InvokeAsync(() =>
114 | {
115 | this.StateHasChanged();
116 | });
117 | };
118 | }
119 |
120 | _scrollTimer.Interval = scrollMilliseconds;
121 | _scrollTimer?.Start();
122 | }
123 | else
124 | {
125 | _scrollTimer?.Stop();
126 | }
127 | }
128 |
129 | protected void OnNextClicked()
130 | {
131 | _carouselRenderIndex = -1;
132 | _activeImageIndex += 1;
133 | this.StateHasChanged();
134 | }
135 |
136 | protected void OnPreviousClicked()
137 | {
138 | _carouselRenderIndex = -1;
139 | _activeImageIndex -= 1;
140 | this.StateHasChanged();
141 | }
142 |
143 | private void SetActiveImageIndex(int newIndex)
144 | {
145 | _carouselRenderIndex = -1;
146 | _activeImageIndex = newIndex;
147 |
148 | this.StateHasChanged();
149 | }
150 |
151 | private string GetClasses()
152 | {
153 | string imageStateClass = "hidden";
154 |
155 | _carouselRenderIndex++;
156 |
157 | if (_carouselRenderIndex == _activeImageIndex)
158 | {
159 | imageStateClass = null;
160 | }
161 |
162 | imageStateClass += OnCarouselItemClicked != null ? " blazor-carousel-pointer" : "";
163 | return imageStateClass.Trim();
164 |
165 | }
166 |
167 | private string GetIndicatorState()
168 | {
169 | string imageStateClass = "";
170 |
171 | _carouselRenderIndex++;
172 |
173 | if (_carouselRenderIndex == _activeImageIndex)
174 | {
175 | imageStateClass = "blazor-carousel-indicator-active";
176 | }
177 |
178 | return imageStateClass;
179 | }
180 |
181 | private string GetImageSource(ImageFile imageFile)
182 | {
183 | string imageSrc = imageFile.Url;
184 |
185 | if (string.IsNullOrEmpty(imageFile.Url) && imageFile.FileContent?.Length > 0)
186 | {
187 | imageSrc = imageFile.Base64Image;
188 | }
189 |
190 | return imageSrc;
191 | }
192 |
193 | private string ResetRenderCounter()
194 | {
195 |
196 | _carouselRenderIndex = -1;
197 | return null;
198 | }
199 | }
200 |
201 |
--------------------------------------------------------------------------------
/Component/Components.csproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | netstandard2.0
5 | 3.0
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Never
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/Component/ImageFile.cs:
--------------------------------------------------------------------------------
1 | using System;
2 |
3 | namespace Components
4 | {
5 | public class ImageFile
6 | {
7 | public string MimeType { get; set; }
8 |
9 | public byte[] FileContent { get; set; }
10 |
11 | public string FileName { get; set; }
12 |
13 | public string Url { get; set; }
14 |
15 | public string Base64Image
16 | {
17 | get
18 | {
19 | string convertedContent = null;
20 |
21 | if (this.FileContent != null)
22 | {
23 | convertedContent = $"data:{this.MimeType};base64,{Convert.ToBase64String(this.FileContent)}";
24 | }
25 |
26 | return convertedContent;
27 | }
28 | }
29 |
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/Component/TemplatedCarousel.razor:
--------------------------------------------------------------------------------
1 | @using System.Timers;
2 |
3 | @typeparam TItem;
4 |
5 |
6 | @if (Items != null)
7 | {
8 |
9 | @foreach (var templatedItem in Items)
10 | {
11 |
{ OnCarouselItemClicked?.Invoke(this, _activeItemIndex); }">
12 | @ItemTemplate(templatedItem);
13 |
14 | }
15 |
16 | @ResetRenderCounter();
17 |
18 |
19 | @if (ShowNavigation)
20 | {
21 |
22 |
23 |
24 | @if (_activeItemIndex > 0 && Items.Count() > 1)
25 | {
26 |
27 |
28 |
29 | }
30 |
31 |
32 |
33 |
34 |
35 | @for (int indicatorIndex = 0; indicatorIndex < Items.Count; indicatorIndex++)
36 | {
37 | int copiedIndex = indicatorIndex;
38 | SetActiveItemIndex(copiedIndex)" blazor-indicator-index="@_carouselRenderIndex">
39 | }
40 |
41 |
42 |
43 |
44 |
45 | @if (_activeItemIndex < Items.Count() - 1 && Items.Count() > 1)
46 | {
47 |
48 |
49 |
50 | }
51 |
52 |
53 |
54 |
55 | @ResetRenderCounter();
56 | }
57 | }
58 |
59 |
60 |
61 | @code {
62 |
63 | [Parameter]
64 | public string id { get; set; }
65 |
66 | [Parameter]
67 | public RenderFragment ItemTemplate { get; set; }
68 |
69 | [Parameter]
70 | public IReadOnlyList Items{ get; set; }
71 |
72 | [Parameter]
73 | public string name { get; set; }
74 |
75 | [Parameter]
76 | public string CssClass { get; set; }
77 |
78 | [Parameter]
79 | public string TemplateItemClass { get; set; }
80 |
81 | [Parameter]
82 | public int? AutoScrollInterval { get; set; }
83 |
84 | public delegate void CarouselItemClicked(object sender, int index);
85 |
86 | [Parameter]
87 | public CarouselItemClicked OnCarouselItemClicked { get; set; }
88 |
89 | [Parameter]
90 | public bool ShowNavigation { get; set; } = true;
91 |
92 | public int ActiveItemIndex => _activeItemIndex;
93 |
94 | private int _carouselRenderIndex = -1;
95 | private int _activeItemIndex = 0;
96 | private Timer _scrollTimer = null;
97 |
98 | protected override async Task OnParametersSetAsync()
99 | {
100 | if ((this.AutoScrollInterval ?? 0) > 0)
101 | {
102 |
103 | int scrollMilliseconds = ((int)(this.AutoScrollInterval)) * 1000;
104 |
105 | _scrollTimer?.Stop();
106 |
107 | if (_scrollTimer == null)
108 | {
109 | _scrollTimer = new Timer();
110 | _scrollTimer.Elapsed += (o, e) =>
111 | {
112 |
113 | _activeItemIndex += 1;
114 |
115 | if (_activeItemIndex > (Items?.Count - 1 ?? 0))
116 | {
117 | _activeItemIndex = 0;
118 | }
119 |
120 | this.InvokeAsync(() =>
121 | {
122 | this.StateHasChanged();
123 | });
124 | };
125 | }
126 |
127 | _scrollTimer.Interval = scrollMilliseconds;
128 | _scrollTimer?.Start();
129 | }
130 | else
131 | {
132 | _scrollTimer?.Stop();
133 | }
134 | }
135 |
136 | protected void OnNextClicked()
137 | {
138 | _carouselRenderIndex = -1;
139 | _activeItemIndex += 1;
140 | this.StateHasChanged();
141 | }
142 |
143 | protected void OnPreviousClicked()
144 | {
145 | _carouselRenderIndex = -1;
146 | _activeItemIndex -= 1;
147 | this.StateHasChanged();
148 | }
149 |
150 | private void SetActiveItemIndex(int newIndex)
151 | {
152 | _carouselRenderIndex = -1;
153 | _activeItemIndex = newIndex;
154 |
155 | this.StateHasChanged();
156 | }
157 |
158 | private string GetClasses()
159 | {
160 | string imageStateClass = "hidden";
161 |
162 | _carouselRenderIndex++;
163 |
164 | if (_carouselRenderIndex == _activeItemIndex)
165 | {
166 | imageStateClass = null;
167 | }
168 |
169 | imageStateClass += OnCarouselItemClicked != null ? " blazor-carousel-pointer" : "";
170 | return imageStateClass.Trim();
171 |
172 | }
173 |
174 | private string GetIndicatorState()
175 | {
176 | string imageStateClass = "";
177 |
178 | _carouselRenderIndex++;
179 |
180 | if (_carouselRenderIndex == _activeItemIndex)
181 | {
182 | imageStateClass = "blazor-carousel-indicator-active";
183 | }
184 |
185 | return imageStateClass;
186 | }
187 |
188 | private string ResetRenderCounter()
189 | {
190 |
191 | _carouselRenderIndex = -1;
192 | return null;
193 | }
194 | }
195 |
196 |
--------------------------------------------------------------------------------
/Component/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using Microsoft.AspNetCore.Components.Web
2 |
--------------------------------------------------------------------------------
/Component/wwwroot/blazorcarousel.css:
--------------------------------------------------------------------------------
1 | .blazor-carousel {
2 | width: 100%;
3 | min-height: 100%;
4 | background-color: black;
5 | margin: 0 auto;
6 | text-align: center;
7 | padding: 1rem;
8 | }
9 | .blazor-carousel-inner {
10 | padding: 0;
11 | margin: 0;
12 | }
13 |
14 | .hidden {
15 | display: none;
16 | }
17 |
18 | .blazor-carousel-image {
19 | padding: 0;
20 | margin: 0;
21 | }
22 |
23 | .blazor-carousel-image img {
24 | width: 100%;
25 | height: 100%;
26 | }
27 |
28 | .blazor-carousel-indicators-container, .blazor-carousel-arrow-container {
29 | display:inline-block;
30 | height: 30px;
31 | }
32 |
33 | .blazor-carousel-indicator {
34 | vertical-align: middle;
35 | height: 28px;
36 | }
37 |
38 | .blazor-carousel-indicator {
39 | list-style: none;
40 | width: 20px;
41 | height: 5px;
42 | background-color: white;
43 | margin-right: 5px;
44 | float: left;
45 | cursor: pointer;
46 | }
47 |
48 | .blazor-carousel-indicator-active {
49 | background-color: cornflowerblue;
50 | }
51 | .blazor-carousel-nav-container {
52 | display: inline-block;
53 | width: 100%;
54 | height: 30px;
55 | text-align:center;
56 | position: relative;
57 | bottom: 0px;
58 | left: 0;
59 | }
60 |
61 | .blazor-carousel-control-next {
62 | padding-left: 10px;
63 | }
64 |
65 | .blazor-carousel-control-prev {
66 | padding-right: 10px;
67 | }
68 |
69 | .blazor-carousel-control-nav {
70 | width: 24px;
71 | height: 24px;
72 | cursor:pointer;
73 | }
74 |
75 | .blazor-carousel-pointer {
76 | cursor: pointer;
77 | }
78 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/App.razor:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Sorry, there's nothing at this address.
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/ComponentsSampleSite.csproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | netcoreapp3.1
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Always
18 |
19 |
20 | Always
21 |
22 |
23 | Always
24 |
25 |
26 | Always
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Pages/CarouselSample.razor:
--------------------------------------------------------------------------------
1 | @page "/carousel"
2 |
3 | @using Components;
4 | @using System.Collections;
5 | @using System.IO;
6 | @using MimeMapping;
7 | @using Microsoft.AspNetCore.Hosting;
8 |
9 | @inject IWebHostEnvironment Environment
10 |
11 |
12 | Image Carousel, no parameters other than imageset and CSSClass set:
13 |
14 |
15 |
16 |
17 | Image Carousel, with Click handler:
18 |
19 |
20 |
21 |
22 |
23 | Image Carousel, with Click handler and auto-scroll set:
24 |
25 |
26 |
27 |
28 | Image Carousel, with Click handler and auto-scroll set, but Navigation turned off:
29 |
30 |
31 |
32 | @code
33 | {
34 | List AssetImages
35 | {
36 | get
37 | {
38 | List imagesToReturn = new List();
39 |
40 | var assetFiles = Environment.WebRootFileProvider.GetDirectoryContents("Assets");
41 |
42 | foreach (var assetFile in assetFiles)
43 | {
44 | ImageFile imageFile = new ImageFile()
45 | {
46 | FileName = assetFile.Name,
47 | MimeType = MimeMapping.MimeUtility.GetMimeMapping(assetFile.Name)
48 | };
49 |
50 | imageFile.FileContent = File.ReadAllBytes(assetFile.PhysicalPath);
51 | imagesToReturn.Add(imageFile);
52 | }
53 |
54 | imagesToReturn.Add(new ImageFile() { Url = "https://picsum.photos/200/300" });
55 |
56 | return imagesToReturn;
57 | }
58 | }
59 |
60 | void OnCarouselItemClicked(object sender, int indexClicked)
61 | {
62 | Console.WriteLine($"Carousel Index Clicked: {indexClicked}");
63 | }
64 | }
65 |
66 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Pages/Error.razor:
--------------------------------------------------------------------------------
1 | @page "/error"
2 |
3 |
4 | Error.
5 | An error occurred while processing your request.
6 |
7 | Development Mode
8 |
9 | Swapping to Development environment will display more detailed information about the error that occurred.
10 |
11 |
12 | The Development environment shouldn't be enabled for deployed applications.
13 | It can result in displaying sensitive information from exceptions to end users.
14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development
15 | and restarting the app.
16 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Pages/Index.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 |
3 | Hello, world!
4 |
5 | Welcome to your new app.
6 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Pages/TemplatedCarouselSample.razor:
--------------------------------------------------------------------------------
1 | @page "/templatedcarousel"
2 |
3 | @using Components;
4 | @using System.Collections;
5 | @using System.IO;
6 | @using MimeMapping;
7 | @using Microsoft.AspNetCore.Hosting;
8 |
9 | @inject IWebHostEnvironment Environment
10 |
11 |
12 |
Templated Carousel with only Items set:
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
Templated Carousel with Items and OnCarouselItemClicked set:
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
Templated Carousel with Items, AutoScrollInterval and OnCarouselItemClicked set:
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
Templated Carousel with Items, AutoScrollInterval and OnCarouselItemClicked set, but Navigation turned off:
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | @code
48 | {
49 | List AssetImages
50 | {
51 | get
52 | {
53 | List imagesToReturn = new List();
54 |
55 | var assetFiles = Environment.WebRootFileProvider.GetDirectoryContents("Assets");
56 |
57 | foreach (var assetFile in assetFiles)
58 | {
59 | ImageFile imageFile = new ImageFile()
60 | {
61 | FileName = assetFile.Name,
62 | MimeType = MimeMapping.MimeUtility.GetMimeMapping(assetFile.Name)
63 | };
64 |
65 | imageFile.FileContent = File.ReadAllBytes(assetFile.PhysicalPath);
66 | imagesToReturn.Add(imageFile);
67 | }
68 |
69 | imagesToReturn.Add(new ImageFile() { Url = "https://picsum.photos/200/300" });
70 |
71 | return imagesToReturn;
72 | }
73 | }
74 |
75 | private string GetImageSource(ImageFile imageFile)
76 | {
77 | string imageSrc = imageFile.Url;
78 |
79 | if (string.IsNullOrEmpty(imageFile.Url) && imageFile.FileContent?.Length > 0)
80 | {
81 | imageSrc = imageFile.Base64Image;
82 | }
83 |
84 | return imageSrc;
85 | }
86 |
87 | void OnCarouselItemClicked(object sender, int indexClicked)
88 | {
89 | Console.WriteLine($"Carousel Index Clicked: {indexClicked}");
90 | }
91 | }
--------------------------------------------------------------------------------
/ComponentsSampleSite/Pages/_Host.cshtml:
--------------------------------------------------------------------------------
1 | @page "/"
2 | @namespace ComponentsSampleSite.Pages
3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4 | @{
5 | Layout = null;
6 | }
7 |
8 |
9 |
10 |
11 |
12 |
13 | ComponentsSampleSite
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | An error has occurred. This application may no longer respond until reloaded.
27 |
28 |
29 | An unhandled exception has occurred. See browser dev tools for details.
30 |
31 |
Reload
32 |
🗙
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Program.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.IO;
4 | using System.Linq;
5 | using System.Threading.Tasks;
6 | using Microsoft.AspNetCore;
7 | using Microsoft.AspNetCore.Hosting;
8 | using Microsoft.Extensions.Configuration;
9 | using Microsoft.Extensions.Hosting;
10 | using Microsoft.Extensions.Logging;
11 |
12 | namespace ComponentsSampleSite
13 | {
14 | public class Program
15 | {
16 | public static void Main(string[] args)
17 | {
18 | CreateHostBuilder(args).Build().Run();
19 | }
20 |
21 | public static IHostBuilder CreateHostBuilder(string[] args) =>
22 | Host.CreateDefaultBuilder(args)
23 | .ConfigureWebHostDefaults(webBuilder =>
24 | {
25 | webBuilder.UseStartup();
26 | });
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:63529",
7 | "sslPort": 44376
8 | }
9 | },
10 | "profiles": {
11 | "IIS Express": {
12 | "commandName": "IISExpress",
13 | "launchBrowser": true,
14 | "environmentVariables": {
15 | "ASPNETCORE_ENVIRONMENT": "Development"
16 | }
17 | },
18 | "ComponentsSampleSite": {
19 | "commandName": "Project",
20 | "launchBrowser": true,
21 | "applicationUrl": "https://localhost:5001;http://localhost:5000",
22 | "environmentVariables": {
23 | "ASPNETCORE_ENVIRONMENT": "Development"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Shared/MainLayout.razor:
--------------------------------------------------------------------------------
1 | @inherits LayoutComponentBase
2 |
3 |
6 |
7 |
8 |
11 |
12 |
13 | @Body
14 |
15 |
16 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Shared/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
7 |
8 |
28 |
29 | @code {
30 | private bool collapseNavMenu = true;
31 |
32 | private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
33 |
34 | private void ToggleNavMenu()
35 | {
36 | collapseNavMenu = !collapseNavMenu;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Components;
7 | using Microsoft.AspNetCore.Hosting;
8 | using Microsoft.AspNetCore.HttpsPolicy;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 |
13 | namespace ComponentsSampleSite
14 | {
15 | public class Startup
16 | {
17 | public Startup(IConfiguration configuration)
18 | {
19 | Configuration = configuration;
20 | }
21 |
22 | public IConfiguration Configuration { get; }
23 |
24 | // This method gets called by the runtime. Use this method to add services to the container.
25 | // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
26 | public void ConfigureServices(IServiceCollection services)
27 | {
28 | services.AddRazorPages();
29 | services.AddServerSideBlazor();
30 | }
31 |
32 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
33 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
34 | {
35 | if (env.IsDevelopment())
36 | {
37 | app.UseDeveloperExceptionPage();
38 | }
39 | else
40 | {
41 | app.UseExceptionHandler("/Error");
42 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
43 | app.UseHsts();
44 | }
45 |
46 | app.UseHttpsRedirection();
47 | app.UseStaticFiles();
48 |
49 | app.UseRouting();
50 |
51 | app.UseEndpoints(endpoints =>
52 | {
53 | endpoints.MapBlazorHub();
54 | endpoints.MapFallbackToPage("/_Host");
55 | });
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using System.Net.Http
2 | @using Microsoft.AspNetCore.Authorization
3 | @using Microsoft.AspNetCore.Components.Authorization
4 | @using Microsoft.AspNetCore.Components.Forms
5 | @using Microsoft.AspNetCore.Components.Routing
6 | @using Microsoft.AspNetCore.Components.Web
7 | @using Microsoft.JSInterop
8 | @using ComponentsSampleSite
9 | @using ComponentsSampleSite.Shared
10 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 | "DetailedErrors": true,
3 | "Logging": {
4 | "LogLevel": {
5 | "Default": "Information",
6 | "Microsoft": "Warning",
7 | "Microsoft.Hosting.Lifetime": "Information"
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft": "Warning",
6 | "Microsoft.Hosting.Lifetime": "Information"
7 | }
8 | },
9 | "AllowedHosts": "*"
10 | }
11 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/Assets/Kitten1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/Assets/Kitten1.png
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/Assets/Kitten2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/Assets/Kitten2.png
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/Assets/Kitten3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/Assets/Kitten3.png
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/Assets/Kitten4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/Assets/Kitten4.png
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/FONT-LICENSE:
--------------------------------------------------------------------------------
1 | SIL OPEN FONT LICENSE Version 1.1
2 |
3 | Copyright (c) 2014 Waybury
4 |
5 | PREAMBLE
6 | The goals of the Open Font License (OFL) are to stimulate worldwide
7 | development of collaborative font projects, to support the font creation
8 | efforts of academic and linguistic communities, and to provide a free and
9 | open framework in which fonts may be shared and improved in partnership
10 | with others.
11 |
12 | The OFL allows the licensed fonts to be used, studied, modified and
13 | redistributed freely as long as they are not sold by themselves. The
14 | fonts, including any derivative works, can be bundled, embedded,
15 | redistributed and/or sold with any software provided that any reserved
16 | names are not used by derivative works. The fonts and derivatives,
17 | however, cannot be released under any other type of license. The
18 | requirement for fonts to remain under this license does not apply
19 | to any document created using the fonts or their derivatives.
20 |
21 | DEFINITIONS
22 | "Font Software" refers to the set of files released by the Copyright
23 | Holder(s) under this license and clearly marked as such. This may
24 | include source files, build scripts and documentation.
25 |
26 | "Reserved Font Name" refers to any names specified as such after the
27 | copyright statement(s).
28 |
29 | "Original Version" refers to the collection of Font Software components as
30 | distributed by the Copyright Holder(s).
31 |
32 | "Modified Version" refers to any derivative made by adding to, deleting,
33 | or substituting -- in part or in whole -- any of the components of the
34 | Original Version, by changing formats or by porting the Font Software to a
35 | new environment.
36 |
37 | "Author" refers to any designer, engineer, programmer, technical
38 | writer or other person who contributed to the Font Software.
39 |
40 | PERMISSION & CONDITIONS
41 | Permission is hereby granted, free of charge, to any person obtaining
42 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
43 | redistribute, and sell modified and unmodified copies of the Font
44 | Software, subject to the following conditions:
45 |
46 | 1) Neither the Font Software nor any of its individual components,
47 | in Original or Modified Versions, may be sold by itself.
48 |
49 | 2) Original or Modified Versions of the Font Software may be bundled,
50 | redistributed and/or sold with any software, provided that each copy
51 | contains the above copyright notice and this license. These can be
52 | included either as stand-alone text files, human-readable headers or
53 | in the appropriate machine-readable metadata fields within text or
54 | binary files as long as those fields can be easily viewed by the user.
55 |
56 | 3) No Modified Version of the Font Software may use the Reserved Font
57 | Name(s) unless explicit written permission is granted by the corresponding
58 | Copyright Holder. This restriction only applies to the primary font name as
59 | presented to the users.
60 |
61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
62 | Software shall not be used to promote, endorse or advertise any
63 | Modified Version, except to acknowledge the contribution(s) of the
64 | Copyright Holder(s) and the Author(s) or with their explicit written
65 | permission.
66 |
67 | 5) The Font Software, modified or unmodified, in part or in whole,
68 | must be distributed entirely under this license, and must not be
69 | distributed under any other license. The requirement for fonts to
70 | remain under this license does not apply to any document created
71 | using the Font Software.
72 |
73 | TERMINATION
74 | This license becomes null and void if any of the above conditions are
75 | not met.
76 |
77 | DISCLAIMER
78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
86 | OTHER DEALINGS IN THE FONT SOFTWARE.
87 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/ICON-LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Waybury
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/README.md:
--------------------------------------------------------------------------------
1 | [Open Iconic v1.1.1](http://useiconic.com/open)
2 | ===========
3 |
4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons)
5 |
6 |
7 |
8 | ## What's in Open Iconic?
9 |
10 | * 223 icons designed to be legible down to 8 pixels
11 | * Super-light SVG files - 61.8 for the entire set
12 | * SVG sprite—the modern replacement for icon fonts
13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.
16 |
17 |
18 | ## Getting Started
19 |
20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections.
21 |
22 | ### General Usage
23 |
24 | #### Using Open Iconic's SVGs
25 |
26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute).
27 |
28 | ```
29 |
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.*
37 |
38 | ```
39 |
40 |
41 |
42 | ```
43 |
44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions.
45 |
46 | ```
47 | .icon {
48 | width: 16px;
49 | height: 16px;
50 | }
51 | ```
52 |
53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag.
54 |
55 | ```
56 | .icon-account-login {
57 | fill: #f00;
58 | }
59 | ```
60 |
61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/).
62 |
63 | #### Using Open Iconic's Icon Font...
64 |
65 |
66 | ##### …with Bootstrap
67 |
68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}`
69 |
70 |
71 | ```
72 |
73 | ```
74 |
75 |
76 | ```
77 |
78 | ```
79 |
80 | ##### …with Foundation
81 |
82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}`
83 |
84 | ```
85 |
86 | ```
87 |
88 |
89 | ```
90 |
91 | ```
92 |
93 | ##### …on its own
94 |
95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}`
96 |
97 | ```
98 |
99 | ```
100 |
101 | ```
102 |
103 | ```
104 |
105 |
106 | ## License
107 |
108 | ### Icons
109 |
110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT).
111 |
112 | ### Fonts
113 |
114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web).
115 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'}
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 | Created by FontForge 20120731 at Tue Jul 1 20:39:22 2014
9 | By P.J. Onori
10 | Created by P.J. Onori with FontForge 2.0 (http://fontforge.sf.net)
11 |
12 |
13 |
14 |
27 |
28 |
30 |
32 |
34 |
36 |
38 |
40 |
42 |
45 |
47 |
49 |
51 |
53 |
55 |
57 |
59 |
61 |
63 |
65 |
67 |
69 |
71 |
74 |
76 |
79 |
81 |
84 |
86 |
88 |
91 |
93 |
95 |
98 |
100 |
102 |
104 |
106 |
109 |
112 |
115 |
117 |
121 |
123 |
125 |
127 |
130 |
132 |
134 |
136 |
138 |
141 |
143 |
145 |
147 |
149 |
151 |
153 |
155 |
157 |
159 |
162 |
165 |
167 |
169 |
172 |
174 |
177 |
179 |
181 |
183 |
185 |
189 |
191 |
194 |
196 |
198 |
200 |
202 |
205 |
207 |
209 |
211 |
213 |
215 |
218 |
220 |
222 |
224 |
226 |
228 |
230 |
232 |
234 |
236 |
238 |
241 |
243 |
245 |
247 |
249 |
251 |
253 |
256 |
259 |
261 |
263 |
265 |
267 |
269 |
272 |
274 |
276 |
280 |
282 |
285 |
287 |
289 |
292 |
295 |
298 |
300 |
302 |
304 |
306 |
309 |
312 |
314 |
316 |
318 |
320 |
322 |
324 |
326 |
330 |
334 |
338 |
340 |
343 |
345 |
347 |
349 |
351 |
353 |
355 |
358 |
360 |
363 |
365 |
367 |
369 |
371 |
373 |
375 |
377 |
379 |
381 |
383 |
386 |
388 |
390 |
392 |
394 |
396 |
399 |
401 |
404 |
406 |
408 |
410 |
412 |
414 |
416 |
419 |
421 |
423 |
425 |
428 |
431 |
435 |
438 |
440 |
442 |
444 |
446 |
448 |
451 |
453 |
455 |
457 |
460 |
462 |
464 |
466 |
468 |
471 |
473 |
477 |
479 |
481 |
483 |
486 |
488 |
490 |
492 |
494 |
496 |
499 |
501 |
504 |
506 |
509 |
512 |
515 |
517 |
520 |
522 |
524 |
526 |
529 |
532 |
534 |
536 |
539 |
542 |
543 |
544 |
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/css/site.css:
--------------------------------------------------------------------------------
1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
2 |
3 | html, body {
4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5 | }
6 |
7 | a, .btn-link {
8 | color: #0366d6;
9 | }
10 |
11 | .btn-primary {
12 | color: #fff;
13 | background-color: #1b6ec2;
14 | border-color: #1861ac;
15 | }
16 |
17 | app {
18 | position: relative;
19 | display: flex;
20 | flex-direction: column;
21 | }
22 |
23 | .top-row {
24 | height: 3.5rem;
25 | display: flex;
26 | align-items: center;
27 | }
28 |
29 | .main {
30 | flex: 1;
31 | }
32 |
33 | .main .top-row {
34 | background-color: #f7f7f7;
35 | border-bottom: 1px solid #d6d5d5;
36 | justify-content: flex-end;
37 | }
38 |
39 | .main .top-row > a, .main .top-row .btn-link {
40 | white-space: nowrap;
41 | margin-left: 1.5rem;
42 | }
43 |
44 | .main .top-row a:first-child {
45 | overflow: hidden;
46 | text-overflow: ellipsis;
47 | }
48 |
49 | .sidebar {
50 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
51 | }
52 |
53 | .sidebar .top-row {
54 | background-color: rgba(0,0,0,0.4);
55 | }
56 |
57 | .sidebar .navbar-brand {
58 | font-size: 1.1rem;
59 | }
60 |
61 | .sidebar .oi {
62 | width: 2rem;
63 | font-size: 1.1rem;
64 | vertical-align: text-top;
65 | top: -2px;
66 | }
67 |
68 | .sidebar .nav-item {
69 | font-size: 0.9rem;
70 | padding-bottom: 0.5rem;
71 | }
72 |
73 | .sidebar .nav-item:first-of-type {
74 | padding-top: 1rem;
75 | }
76 |
77 | .sidebar .nav-item:last-of-type {
78 | padding-bottom: 1rem;
79 | }
80 |
81 | .sidebar .nav-item a {
82 | color: #d7d7d7;
83 | border-radius: 4px;
84 | height: 3rem;
85 | display: flex;
86 | align-items: center;
87 | line-height: 3rem;
88 | }
89 |
90 | .sidebar .nav-item a.active {
91 | background-color: rgba(255,255,255,0.25);
92 | color: white;
93 | }
94 |
95 | .sidebar .nav-item a:hover {
96 | background-color: rgba(255,255,255,0.1);
97 | color: white;
98 | }
99 |
100 | .content {
101 | padding-top: 1.1rem;
102 | }
103 |
104 | .navbar-toggler {
105 | background-color: rgba(255, 255, 255, 0.1);
106 | }
107 |
108 | .valid.modified:not([type=checkbox]) {
109 | outline: 1px solid #26b050;
110 | }
111 |
112 | .invalid {
113 | outline: 1px solid red;
114 | }
115 |
116 | .validation-message {
117 | color: red;
118 | }
119 |
120 | #blazor-error-ui {
121 | background: lightyellow;
122 | bottom: 0;
123 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
124 | display: none;
125 | left: 0;
126 | padding: 0.6rem 1.25rem 0.7rem 1.25rem;
127 | position: fixed;
128 | width: 100%;
129 | z-index: 1000;
130 | }
131 |
132 | #blazor-error-ui .dismiss {
133 | cursor: pointer;
134 | position: absolute;
135 | right: 0.75rem;
136 | top: 0.5rem;
137 | }
138 |
139 | @media (max-width: 767.98px) {
140 | .main .top-row:not(.auth) {
141 | display: none;
142 | }
143 |
144 | .main .top-row.auth {
145 | justify-content: space-between;
146 | }
147 |
148 | .main .top-row a, .main .top-row .btn-link {
149 | margin-left: 0;
150 | }
151 | }
152 |
153 | @media (min-width: 768px) {
154 | app {
155 | flex-direction: row;
156 | }
157 |
158 | .sidebar {
159 | width: 250px;
160 | height: 100vh;
161 | position: sticky;
162 | top: 0;
163 | }
164 |
165 | .main .top-row {
166 | position: sticky;
167 | top: 0;
168 | }
169 |
170 | .main > div {
171 | padding-left: 2rem !important;
172 | padding-right: 1.5rem !important;
173 | }
174 |
175 | .navbar-toggler {
176 | display: none;
177 | }
178 |
179 | .sidebar .collapse {
180 | /* Never collapse the sidebar for wide screens */
181 | display: block;
182 | }
183 | }
184 |
185 | .blazor-carousel-templated-item {
186 | height: 300px;
187 | max-height: 300px;
188 | }
189 |
190 | .blazor-carousel-image {
191 | height: 300px;
192 | max-height: 300px;
193 | }
194 |
195 | .blazor-carousel-templated-item img {
196 | width: 100%;
197 | height: 100%;
198 | }
--------------------------------------------------------------------------------
/ComponentsSampleSite/wwwroot/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VorTechS/BlazorCarousel/e01f63693b89406fedff961d750097cb4effbc56/ComponentsSampleSite/wwwroot/favicon.ico
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 VorTechS
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BlazorCarousel
2 |
3 | A templated Blazor Carousel (TemplatedCarousel) component and the original Image Carousel (Carousel) it started life from.
4 |
5 | The project started life as a basic Image Carousel and was extended to add some 'useful' features and finally I took the plunge to make it support templating, meaning any content can be embedded into the Carousel.
6 |
7 | The sample project contains some embedded images and renders the images into both components showing the various options.
8 |
9 | ###### Basic usage
10 |
11 | Add a reference to your project, referencing the 'Components' project
12 |
13 | In your _Host.cshtml file add the following line to use the default stylesheet:
14 |
15 |
16 |
17 | Add the component to your Razor page using the following lines:
18 |
19 | @using Components;
20 |
21 | **The Old Image Carousel**
22 |
23 | For the old carousel, add the following line to create an instance:
24 |
25 |
26 |
27 | ... where @AssetImages is a reference to a List of ImageFile that you build up yourself.
28 |
29 | The ImageFile can either have FileContent (the image bytes) or a Url specified.
30 | The sample project contains examples of both in the CarouselSample.razor page
31 |
32 |
33 | ###### Current Carousel Parameters:
34 |
35 | imageset: a List for the carousel to render
36 |
37 | CssClass: additional CSS classes that you want to apply to the carousel outer container
38 |
39 | ImageClass: additional CSS classes that you want to apply to the indivudal IMAGE containers (Note: applied to all)
40 |
41 | OnCarouselItemClicked: event handler for when an item is clicked (also changes the cursor to reflect an image can be clicked)
42 |
43 | AutoScrollInterval: the number of seconds to elapse before the next image in the sequence is displayed automatically
44 |
45 | ShowNavigation: (Defaulted to true) allows the bottom navigation panel to be displayed or hidden
46 |
47 |
48 | **The new Templated Carousel Component**
49 |
50 | For the templated carousel, add lines similar to the following:
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | ###### Current TemplatedCarousel Parameters:
60 |
61 | TItem: The type of item being rendered
62 |
63 | Items: The List of items to be rendered
64 |
65 | ItemTemplate: The HTML templated being used to render the items
66 |
67 | CssClass: additional CSS classes that you want to apply to the carousel outer container
68 |
69 | OnCarouselItemClicked: event handler for when an item is clicked (also changes the cursor to reflect an image can be clicked)
70 |
71 | AutoScrollInterval: the number of seconds to elapse before the next image in the sequence is displayed automatically
72 |
73 | ShowNavigation: (Defaulted to true) allows the bottom navigation panel to be displayed or hidden
74 |
--------------------------------------------------------------------------------