Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
229 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| images: | ||
| - image: /images/cantara1.png | ||
| content_html: "" | ||
| - image: /images/cantara2.png | ||
| content_html: "" | ||
| - image: /images/cantara3.png | ||
| content_html: "" | ||
| - image: /images/cantara4.png | ||
| content_html: "" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| {{ .context.Scratch.Set "height" .height }} | ||
| {{ .context.Scratch.Set "unit" .unit }} | ||
| {{ .context.Scratch.Set "items" .items }} | ||
| <div id="carousel10" class="carousel" duration="{{ .duration }}" items="{{ .items }}"> | ||
| <ul> | ||
| {{ range $index, $slide := .context.Site.Data.carousel.images }} | ||
| <li id="c10_slide{{ add $index 1}}" style="min-width: calc(100%/{{ $.context.Scratch.Get "items" }}); padding-bottom: {{ $.context.Scratch.Get "height" }}{{ $.context.Scratch.Get "unit" }};"><img src="{{ $slide.image }}" alt="" /><div><div>{{ $slide.content_html }}</div></div></li> | ||
| {{ end }} | ||
| </ul> | ||
| <ol> | ||
| {{ range $index, $page := .context.Site.Data.carousel.images }} | ||
| <li><a href="#c10_slide{{ add $index 1 }}"></a></li> | ||
| {{ end }} | ||
| </ol> | ||
| <div class="prev">‹</div> | ||
| <div class="next">›</div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <script type="text/javascript" src="/js/carousel.js"></script> | ||
| <link rel="stylesheet" href="/css/carousel.css"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <p>This Webpage has been created with <a href="https://gohugo.io/">Hugo</a>, <a href="https://github.com/matcornic/hugo-theme-learn">hugo-theme-learn</a>, <a href="https://neovim.io/">neovim (the best editor in the world)</a> and <a href="https://pages.github.com">GitHub Pages</a>. <a href="https://www.github.com/reckel-jm/cantara-webpage">See the webpage repository</a> to learn how to make changes.</p> | ||
| <hr/> | ||
| <p>John 3:16: <br/> | ||
| For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. | ||
| For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. <br/> <br/> | ||
| </p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| {{ .Scratch.Set "height" (.Get "height") }} | ||
| {{ .Scratch.Set "unit" (.Get "unit") }} | ||
| {{ .Scratch.Set "ordinal" .Ordinal }} | ||
| {{ .Scratch.Set "items" (.Get "items") }} | ||
| <div id="carousel{{ .Ordinal }}" class="carousel" duration="{{ .Get `duration` }}"> | ||
| <ul> | ||
| {{ range $index, $slide := .Site.Data.carousel.images }} | ||
| <li id="c{{ $.Scratch.Get "ordinal" }}_slide{{ add $index 1}}" style="min-width: calc(100%/{{ $.Scratch.Get "items" }}); padding-bottom: {{ $.Scratch.Get "height" }}{{ $.Scratch.Get "unit" }};"><img src="{{ $slide.image }}" alt="" /><div><div>{{ $slide.content_html }}</div></div></li> | ||
| {{ end }} | ||
| </ul> | ||
| <ol> | ||
| {{ range $index, $page := .Site.Data.carousel.images }} | ||
| <li><a href="#c{{ $.Scratch.Get "ordinal" }}_slide{{ add $index 1 }}"></a></li> | ||
| {{ end }} | ||
| </ol> | ||
| <div class="prev">‹</div> | ||
| <div class="next">›</div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .carousel {position: relative;} | ||
| .carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: transparent; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0;} | ||
| .carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} | ||
| .carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;} | ||
| .carousel ul li > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; } | ||
| .carousel ul li > img {object-fit: cover;} | ||
| .carousel ul li > div {display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 20px;} | ||
| .carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9;} | ||
| .carousel ol li {list-style: none; padding: 0 5px;} | ||
| .carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;} | ||
| .carousel ol li.selected a {background: white;} | ||
| .carousel .prev, .carousel .next {display: none; user-select:none; cursor: pointer; font-size: 50px; color: white; position: absolute; left: 0; padding: 15px 15px 30px; top: 50%; transform: translateY(-50%); z-index: 9; line-height: 0;} | ||
| .carousel .next {left: auto; right: 0;} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
|
|
||
| const carousels = document.querySelectorAll('.carousel'); | ||
| carousels.forEach(function( carousel ) { | ||
|
|
||
| const ele = carousel.querySelector('ul'); | ||
| const amountvisible = Math.round(ele.offsetWidth/ele.querySelector('li:nth-child(1)').offsetWidth); | ||
| const bullets = carousel.querySelectorAll('ol li'); | ||
| const slides = carousel.querySelectorAll('ul li'); | ||
| const nextarrow = carousel.querySelector('.next'); | ||
| const prevarrow = carousel.querySelector('.prev'); | ||
|
|
||
| // Initialize the carousel | ||
| nextarrow.style.display = 'block'; | ||
| prevarrow.style.display = 'block'; | ||
| ele.scrollLeft = 0; | ||
| bullets[0].classList.add('selected'); | ||
| slides[0].classList.add('selected'); | ||
| if(amountvisible>1) { | ||
| var removeels = carousel.querySelectorAll('ol li:nth-last-child(-n + '+(amountvisible-1)+')'); | ||
| removeels.forEach(function(removeel) { | ||
| removeel.remove(); | ||
| }); | ||
| } | ||
|
|
||
| const setSelected = function() { | ||
| bullets.forEach(function(bullet) { | ||
| bullet.classList.remove('selected'); | ||
| }); | ||
| slides.forEach(function(slide) { | ||
| slide.classList.remove('selected'); | ||
| }); | ||
| const scrolllength = carousel.querySelector('ul li:nth-child(2)').offsetLeft - carousel.querySelector('ul li:nth-child(1)').offsetLeft; | ||
| const nthchild = (Math.round((ele.scrollLeft/scrolllength)+1)); | ||
| carousel.querySelector('ol li:nth-child('+nthchild+')').classList.add('selected'); | ||
| carousel.querySelector('ul li:nth-child('+nthchild+')').classList.add('selected'); | ||
| if(carousel.parentElement.parentElement.querySelector('.dynamictitle')) { | ||
| const title = carousel.querySelector('ul li:nth-child('+nthchild+') img').getAttribute('title'); | ||
| if(title) carousel.parentElement.parentElement.querySelector('.dynamictitle').innerHTML = title; | ||
| } | ||
| } | ||
|
|
||
| const scrollTo = function(event) { | ||
| event.preventDefault(); | ||
| ele.scrollLeft = ele.querySelector(this.getAttribute('href')).offsetLeft; | ||
| } | ||
|
|
||
| const nextSlide = function() { | ||
| if(!carousel.querySelector('ol li:last-child').classList.contains('selected')) { | ||
| carousel.querySelector('ol li.selected').nextElementSibling.querySelector('a').click(); | ||
| } else { | ||
| carousel.querySelector('ol li:first-child a').click(); | ||
| } | ||
| } | ||
|
|
||
| const prevSlide = function() { | ||
| if(!carousel.querySelector('ol li:first-child').classList.contains('selected')) { | ||
| carousel.querySelector('ol li.selected').previousElementSibling.querySelector('a').click(); | ||
| } else { | ||
| carousel.querySelector('ol li:last-child a').click(); | ||
| } | ||
| } | ||
|
|
||
| const setInteracted = function() { | ||
| ele.classList.add('interacted'); | ||
| } | ||
|
|
||
| // Attach the handlers | ||
| ele.addEventListener("scroll", debounce(setSelected)); | ||
| ele.addEventListener("touchstart", setInteracted); | ||
| ele.addEventListener('keydown', function (e){ | ||
| if(e.key == 'ArrowLeft') ele.classList.add('interacted'); | ||
| if(e.key == 'ArrowRight') ele.classList.add('interacted'); | ||
| }); | ||
|
|
||
| nextarrow.addEventListener("click", nextSlide); | ||
| nextarrow.addEventListener("mousedown", setInteracted); | ||
| nextarrow.addEventListener("touchstart", setInteracted); | ||
|
|
||
| prevarrow.addEventListener("click", prevSlide); | ||
| prevarrow.addEventListener("mousedown", setInteracted); | ||
| prevarrow.addEventListener("touchstart", setInteracted); | ||
|
|
||
| bullets.forEach(function(bullet) { | ||
| bullet.querySelector('a').addEventListener('click', scrollTo); | ||
| bullet.addEventListener("mousedown", setInteracted); | ||
| bullet.addEventListener("touchstart", setInteracted); | ||
| }); | ||
|
|
||
| //setInterval for autoplay | ||
| if(carousel.getAttribute('duration')) { | ||
| setInterval(function(){ | ||
| if (ele != document.querySelector(".carousel:hover ul") && ele.classList.contains('interacted')==false) { | ||
| nextarrow.click(); | ||
| } | ||
| }, carousel.getAttribute('duration')); | ||
| } | ||
|
|
||
|
|
||
| }); //end foreach | ||
|
|
||
| }); //end onload | ||
|
|
||
|
|
||
| /** | ||
| * Debounce functions for better performance | ||
| * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com | ||
| * @param {Function} fn The function to debounce | ||
| */ | ||
| function debounce (fn) { | ||
| // Setup a timer | ||
| let timeout; | ||
| // Return a function to run debounced | ||
| return function () { | ||
| // Setup the arguments | ||
| let context = this; | ||
| let args = arguments; | ||
| // If there's a timer, cancel it | ||
| if (timeout) { | ||
| window.cancelAnimationFrame(timeout); | ||
| } | ||
| // Setup the new requestAnimationFrame() | ||
| timeout = window.requestAnimationFrame(function () { | ||
| fn.apply(context, args); | ||
| }); | ||
| }; | ||
| } |