_includes/infographics/infographics.html in word-games-theme-2.1.1 vs _includes/infographics/infographics.html in word-games-theme-2.1.2
- old
+ new
@@ -1,342 +1,221 @@
-<!-- <style>
- /* Reset default browser styles */
-
- .infographic {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 50px auto;
- max-width: 800px;
- }
- .infographic-item {
- flex-basis: 30%;
- text-align: center;
- /* background-color: #404040; */
- /* border-radius: 10px; */
- /* padding: 30px; */
- }
- .infographic-item img {
- max-width: 100%;
- height: auto;
- border-radius: 8px;
- margin-bottom: 10px;
- box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%);
- }
-
- .infographic-item h3 {
- font-size: 20px;
- margin-bottom: 10px;
- color: #fff;
- }
-
- .infographic-item p {
- font-size: 16px;
- margin-bottom: 0px;
- }
-
- @media (max-width: 600px) {
- .infographic {
- flex-wrap: wrap;
- }
-
- .infographic-item {
- flex-basis: 100%;
- margin-bottom: 30px;
- }
- }
- </style>
-<div class="infographics_section">
- <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
- <div class="infographic">
- {%- for item in dataToShow.infographics -%}
- <div class="infographic-item">
- <img src="{{item.image}}" alt="Image 1">
- <p class="infographic-desc">{{item.description | capitalize }}</p>
- </div>
- {%- endfor -%}
- </div>
-
-
- <div class="slider">
- <div class="row">
- <div class="col-md-12 mx-auto">
- <div id="carousel">
- {%- for item in featureData.infographics -%}
- <div class="slide">
- <img src="{{item.image}}" alt="Photo1" />
- <p class="infographics-desc">{{item.description | capitalize }}</p>
- </div>
- {%- endfor -%}
- </div>
- </div>
- </div>
- <button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
- <button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
- </div>
- <div class="dots-container">
- {%- for item in featureData.infographics -%}
- <span class="dot active" data-slide="{{ forloop.index0 }}"></span>
- {%- endfor -%}
- </div> -->
-<!-- </div> -->
-
-<!-- <script>
- function Slider() {
- const carouselSlides = document.querySelectorAll('.slide');
- const btnPrev = document.querySelector('.prev');
- const btnNext = document.querySelector('.next');
- const dotsSlide = document.querySelector('.dots-container');
- let currentSlide = 0;
-
- const activeDot = function (slide) {
- document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
- document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
- };
- activeDot(currentSlide);
-
- const changeSlide = function (slides) {
- carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
- };
- changeSlide(currentSlide);
-
- btnNext.addEventListener('click', function () {
- currentSlide++;
- if (carouselSlides.length - 1 < currentSlide) {
- currentSlide = 0;
- };
- changeSlide(currentSlide);
- activeDot(currentSlide);
- });
- btnPrev.addEventListener('click', function () {
- currentSlide--;
- if (0 >= currentSlide) {
- currentSlide = 0;
- };
- changeSlide(currentSlide);
- activeDot(currentSlide);
- });
-
- dotsSlide.addEventListener('click', function (e) {
- if (e.target.classList.contains('dot')) {
- const slide = e.target.dataset.slide;
- changeSlide(slide);
- activeDot(slide);
- }
- });
- };
- Slider();
-</script> -->
-
-
-
-
-
-
-
-
-
-
-
-
-
<style>
- .infographics-wrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- overflow-x: hidden;
- overflow-y: hidden;
- height: 130vh;
- }
-
- .infographics-wrapper .container {
+ .inforgraphics_section {
width: 100%;
- height: 100%;
+ padding: 50px 0px 50px 0px;
+ border-top: 1px solid rgb(224, 224, 224);
display: flex;
- transform-style: preserve-3d;
- align-items: center;
flex-direction: column;
+ align-items: center;
}
- .infographics-wrapper .cards {
+ .inforgraphics_section .wrapper {
+ display: flex;
+ max-width: 700px;
position: relative;
- width: 300px;
- height: 300px;
- margin-bottom: 20px;
- perspective: 1000px;
- transform-style: preserve-3d;
}
- .infographics-wrapper .cards label {
- position: absolute;
- width: 300px;
- left: 0;
- right: 0;
- margin: auto;
+ .inforgraphics_section .wrapper svg {
+ top: 50%;
+ height: 44px;
+ width: 44px;
+ color: #343F4F;
cursor: pointer;
- transition: transform 0.55s ease;
+ font-size: 1.15rem;
+ position: absolute;
+ text-align: center;
+ line-height: 44px;
+ background: #eee;
+ border-radius: 50%;
+ transform: translateY(-50%);
+ transition: transform 0.1s linear;
}
- .infographics-wrapper .cards .card {
- position: relative;
- height: 100%;
- background-color: #323444;
- border-radius: 10px;
- padding: 5px;
+ .inforgraphics_section .wrapper svg:active {
+ transform: translateY(-50%) scale(0.9);
}
- .infographics-wrapper .card .image {
- display: flex;
- justify-content: space-between;
+ .inforgraphics_section .wrapper svg:hover {
+ background: #f2f2f2;
}
- .infographics-wrapper .card .image img {
- border-radius: 5px;
- box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%);
- margin-top: 23px;
- width: 86%;
- object-fit: cover;
+ .inforgraphics_section .wrapper svg:first-child {
+ left: 0px;
+ display: none;
+ z-index: 999;
}
- .infographics-wrapper .card .image .dots {
- text-align: center;
+ .inforgraphics_section .wrapper svg:last-child {
+ right: 0px;
}
- .dots div {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- margin-bottom: 10px;
+ .carousel {
+ display: flex;
+ max-width: 700px;
+ overflow-x: scroll;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
}
- .dots div:nth-child(1) {
- background-color: var(--current-color1);
+ .carousel-inner {
+ display: flex;
+ flex-wrap: nowrap;
}
- .dots div:nth-child(2) {
- background-color: #5B85F9;
+ .slide {
+ flex: 0 0 calc(100% / 3);
+ scroll-snap-align: start;
+ padding: 20px;
}
- .dots div:nth-child(3) {
-
- background-color: #000;
+ .carousel img {
+ width: 100%;
+ object-fit: contain;
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
}
- .card .infos {
- display: block;
- text-align: end;
- padding-top: 2rem;
+ .carousel-inner p {
+ text-align: center;
+ margin: 10px 0;
+ font-size: 14px;
+ white-space: normal;
+ word-wrap: break-word;
}
- .infos span {
+ @media screen and (max-width: 768px) {
+ .inforgraphics_section .wrapper {
+ max-width: 100%;
+ }
- display: block;
- }
+ .carousel-inner p {
+ font-size: 20px;
+ }
- .infos .name {
- font-size: 30px;
- color: var(--current-color1);
- letter-spacing: 8px;
- margin-bottom: 20px;
- padding-left: 25%;
- transition: all .6s ease;
- }
+ .inforgraphics_section .wrapper i:first-child {
+ left: 0;
+ /* margin-left: 14px; */
+ z-index: 99;
+ }
- .infos .lorem {
- font-size: 15px;
- color: #ECEAED;
+ .inforgraphics_section .wrapper i:last-child {
+ right: 0;
+ z-index: 99;
+ display: block !important;
+ }
- text-align: center;
+ .carousel {
+ overflow-x: hidden;
+ }
+ .slide {
+ flex: 0 0 100%;
+ margin-right: 0;
+ }
}
+</style>
- #s1:checked~.cards #slide4,
- #s2:checked~.cards #slide5,
- #s3:checked~.cards #slide1,
- #s4:checked~.cards #slide2,
- #s5:checked~.cards #slide3 {
- transform: translate3d(-70%, 0, -220px);
- --current-color1: #ECEAED;
- --current-color2: #404457;
- }
+<div class="inforgraphics_section">
+ <h3 class="text-center w-100 mb-5" style="font-size:22px"><b>Other useful information</b></h3>
+ <div class="wrapper">
+ <svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-left</title> <path d="M7.28 23.28c-0.2 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2l6.44-6.44c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-5.8 5.84 5.84 5.84c0.32 0.32 0.32 0.84 0 1.2-0.16 0.16-0.44 0.24-0.64 0.24z"></path> </g></svg>
+ <div class="carousel">
+ <div class="carousel-inner">
+ {%- for item in dataToShow.infographics -%}
+ <div class="slide">
+ <img src="{{ item.image }}" alt="img" draggable="false">
+ <p class="infographic-desc">{{ item.description | capitalize }}</p>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ <svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-right</title> <path d="M0.88 23.28c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.2l5.76-5.84-5.8-5.84c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l6.44 6.44c0.16 0.16 0.24 0.36 0.24 0.6s-0.080 0.44-0.24 0.6l-6.4 6.44c-0.2 0.16-0.4 0.24-0.6 0.24z"></path> </g></svg>
+ </div>
+</div>
- #s1:checked~.cards #slide5,
- #s2:checked~.cards #slide1,
- #s3:checked~.cards #slide2,
- #s4:checked~.cards #slide3,
- #s5:checked~.cards #slide4 {
+<script>
+ const carousel = document.querySelector(".carousel-inner"),
+ firstImg = carousel.querySelectorAll("img")[0],
+ arrowIcons = document.querySelectorAll(".wrapper svg")
- transform: translate3d(-35%, 0, -120px);
- --current-color1: #ECEAED;
- --current-color2: #404457;
+ const numImages = carousel.querySelectorAll("img").length;
+ const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+
+ if (numImages > 3) {
+ arrowIcons[1].style.display = "block"
+ } else {
+ arrowIcons[0].style.display = "none";
+ arrowIcons[1].style.display = "none";
}
- #s1:checked~.cards #slide1,
- #s2:checked~.cards #slide2,
- #s3:checked~.cards #slide3,
- #s4:checked~.cards #slide4,
- #s5:checked~.cards #slide5 {
- transform: translate3d(0, 0, 0);
- --current-color1: #fad00c;
- --current-color2: #ECEAED;
+ let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
+ const showHideIcons = () => {
+ let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+ arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+ arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}
- #s1:checked~.cards #slide2,
- #s2:checked~.cards #slide3,
- #s3:checked~.cards #slide4,
- #s4:checked~.cards #slide5,
- #s5:checked~.cards #slide1 {
+ arrowIcons.forEach(icon => {
+ icon.addEventListener("click", () => {
+ let firstImgWidth = firstImg.clientWidth + 40;
+ const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+ carousel.scrollBy({
+ left: scrollAmount,
+ behavior: "smooth",
+ });
+ setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+ });
+ });
- transform: translate3d(35%, 0, -120px);
- --current-color1: #ECEAED;
- --current-color2: #404457;
- }
+ // const autoSlide = () => {
+ // // if there is no image left to scroll then return from here
+ // if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
- #s1:checked~.cards #slide3,
- #s2:checked~.cards #slide4,
- #s3:checked~.cards #slide5,
- #s4:checked~.cards #slide1,
- #s5:checked~.cards #slide2 {
- transform: translate3d(70%, 0, -220px);
- --current-color1: #ECEAED;
- --current-color2: #404457;
- }
+ // positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+ // let firstImgWidth = firstImg.clientWidth + 14;
+ // // getting difference value that needs to add or reduce from carousel left to take middle img center
+ // let valDifference = firstImgWidth - positionDiff;
- @media (max-width:768px) {
- .infographics-wrapper .cards label{
- left: -100px;
- }
-
- }
-</style>
+ // if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+ // return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+ // }
+ // // if user is scrolling to the left
+ // carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+ // }
-<div class="infographics-wrapper">
- <div class="container">
- <h3 class="text-center w-100 mb-5 mt-5" style="font-size:20px"><b>Other useful information</b></h3>
- <input type="radio" name="slider" class="d-none" id="s1" checked>
- <input type="radio" name="slider" class="d-none" id="s2">
- <input type="radio" name="slider" class="d-none" id="s3">
- <input type="radio" name="slider" class="d-none" id="s4">
- <input type="radio" name="slider" class="d-none" id="s5">
- <div class="cards">
+ // const dragStart = (e) => {
+ // // updatating global variables value on mouse down event
+ // isDragStart = true;
+ // prevPageX = e.pageX || e.touches[0].pageX;
+ // prevScrollLeft = carousel.scrollLeft;
+ // }
- {%- for item in dataToShow.infographics -%}
- <label for="s{{ forloop.index }}" id="slide{{ forloop.index }}">
- <div class="card">
- <div class="image">
- <img src="{{item.image}}" alt="">
- <div class="dots">
- <div class="dot1"></div>
- <div class="dot2"></div>
- <div class="dot3"></div>
- </div>
- </div>
- <div class="infos">
- <span class="lorem">{{item.description | capitalize }}</span>
- </div>
- </div>
- </label>
- {%- endfor -%}
- </div>
- </div>
-</div>
+ // const dragging = (e) => {
+ // // scrolling images/carousel to left according to mouse pointer
+ // if (!isDragStart) return;
+ // e.preventDefault();
+ // isDragging = true;
+ // carousel.classList.add("dragging");
+ // positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+ // carousel.scrollLeft = prevScrollLeft - positionDiff;
+ // showHideIcons();
+ // }
+
+ // const dragStop = () => {
+ // isDragStart = false;
+ // carousel.classList.remove("dragging");
+
+ // if (!isDragging) return;
+ // isDragging = false;
+ // autoSlide();
+ // }
+
+ // carousel.addEventListener("mousedown", dragStart);
+ // carousel.addEventListener("touchstart", dragStart);
+
+ // document.addEventListener("mousemove", dragging);
+ // carousel.addEventListener("touchmove", dragging);
+
+ // document.addEventListener("mouseup", dragStop);
+ // carousel.addEventListener("touchend", dragStop);
+</script>
\ No newline at end of file