Skip to content

Commit

Permalink
https://www.nationalgeographic.com/tv/movies-and-specials/2699a042-a1…
Browse files Browse the repository at this point in the history 
…66-4896-8440-92881cc17cad
  • Loading branch information
@ricoThaka
ricoThaka authored Jun 11, 2024
1 parent a32ab95 commit 4bdee73
Show file tree
Hide file tree
Showing 2 changed files with 3,391 additions and 0 deletions.
219 changes: 219 additions & 0 deletions _includes/carousel.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
{% assign letters = letterstring | split: ',' %}
{% assign number = include.number | minus: 1 %}
<div class="carousel__holder">
<div id="carousel{{ number }}" class="carousel">
{% for item in page.carousels[number].images %}
<input class="carousel__activator" type="radio" name="carousel{{ number }}" id="{{ number }}{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
{% endfor %}
{% for item in page.carousels[number].images %}
{% if forloop.index == forloop.length %}
{% assign nextindex = 0 %}
{% else %}
{% assign nextindex = forloop.index0 | plus: 1 %}
{% endif %}
{% assign nextletter = letters[nextindex] %}
{% if forloop.index0 == 0 %}
{% assign previndex = forloop.length | minus: 1 %}
{% else %}
{% assign previndex = forloop.index0 | minus: 1 %}
{% endif %}
{% assign prevletter = letters[previndex] %}
<div class="carousel__controls">
<label class="carousel__control carousel__control--backward" for="{{ number }}{{ prevletter }}"></label>
<label class="carousel__control carousel__control--forward" for="{{ number }}{{ nextletter }}"></label>
</div>
{% endfor %}
<div class="carousel__track">
<ul>
{% for item in page.carousels[number].images %}
<li class="carousel__slide" style="background-image: url('{{ item.image }}');"></li>
{% endfor %}
</ul>
</div>
<div class="carousel__indicators">
{% for item in page.carousels[number].images %}
<label class="carousel__indicator" for="{{ number }}{{ letters[forloop.index0] }}"></label>
{% endfor %}
</div>
</div>
</div>

<style>
.carousel__holder {width: 100%; position: relative; padding-bottom: {{ include.height }}{{ include.unit }}; margin: 1rem 0 1rem;}
.carousel {
height: 100%;
width: 100%;
overflow: hidden;
text-align: center;
position: absolute;
padding: 0;
}
.carousel__controls,
.carousel__activator {
display: none;
}
{% for item in page.carousels[number].images %}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
-webkit-transform: translateX(-{{ forloop.index0 }}00%);
transform: translateX(-{{ forloop.index0 }}00%);
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__slide:nth-of-type({{ forloop.index }}) {
transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
top: 0;
left: 0;
right: 0;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__controls:nth-of-type({{ forloop.index }}) {
display: block;
opacity: 1;
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
opacity: 1;
}
{% endfor %}

.carousel__control {
height: 30px;
width: 30px;
margin-top: -15px;
top: 50%;
position: absolute;
display: block;
cursor: pointer;
border-width: 5px 5px 0 0;
border-style: solid;
border-color: #fafafa;
opacity: 0.35;
opacity: 1;
outline: 0;
z-index: 3;
}
.carousel__control:hover {
opacity: 1;
}
.carousel__control--backward {
left: 20px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.carousel__control--forward {
right: 20px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.carousel__indicators {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.carousel__indicator {
height: 15px;
width: 15px;
border-radius: 100%;
display: inline-block;
z-index: 2;
cursor: pointer;
opacity: 0.35;
margin: 0 2.5px 0 2.5px;
}
.carousel__indicator:hover {
opacity: 0.75;
}
.carousel__track {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
transition: -webkit-transform 0.5s ease 0s;
transition: transform 0.5s ease 0s;
transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}
.carousel__track .carousel__slide {
display: block;
top: 0;
left: 0;
right: 0;
opacity: 1;
}
{% for item in page.carousels[number].images %}
.carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
-webkit-transform: translateX({{ forloop.index0 }}00%);
transform: translateX({{ forloop.index0 }}00%);
}
{% endfor %}

.carousel--scale .carousel__slide {
-webkit-transform: scale(0);
transform: scale(0);
}
.carousel__slide {
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
.carousel__slide .overlay {height: 100%;}
.carousel--thumb .carousel__indicator {
height: 30px;
width: 30px;
}
.carousel__indicator {
background-color: #fafafa;
}
{% for item in page.carousels[number].images %}
.carousel__slide:nth-of-type({{ forloop.index }}),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
background-size: cover;
background-position: center;
}
{% endfor %}
</style>

<script>
function isVisible(el) {
while (el) {
if (el === document) {
return true;
}

var $style = window.getComputedStyle(el, null);

if (!el) {
return false;
} else if (!$style) {
return false;
} else if ($style.display === 'none') {
return false;
} else if ($style.visibility === 'hidden') {
return false;
} else if (+$style.opacity === 0) {
return false;
} else if (($style.display === 'block' || $style.display === 'inline-block') &&
$style.height === '0px' && $style.overflow === 'hidden') {
return false;
} else {
return $style.position === 'fixed' || isVisible(el.parentNode);
}
}
}
{% if include.duration %}
setInterval(function(){
var j=0;
var elements = document.querySelectorAll('#carousel{{ number}} .carousel__control--forward');
for(i=(elements.length - 1);i>-1;i--) {
if(isVisible(elements[i])) j=i;
}
elements[j].click();
},{{ include.duration }}000);
{% endif %}
</script>
Loading

0 comments on commit 4bdee73

Please sign in to comment.