_includes/infographics/infographics.html in appscms-tools-theme-4.8.3 vs _includes/infographics/infographics.html in appscms-tools-theme-4.8.4
- old
+ new
@@ -1,244 +1,244 @@
-<style>
- .inforgraphics_section {
- width: 100%;
- padding: 50px 0px 50px 0px;
- border-top: 1px solid rgb(224, 224, 224);
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .inforgraphics_section .wrapper {
- display: flex;
- max-width: 700px;
- position: relative;
- }
-
- .inforgraphics_section .wrapper i {
- top: 50%;
- height: 44px;
- width: 44px;
- color: #343f4f;
- cursor: pointer;
- 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;
- }
-
- .inforgraphics_section .wrapper i:active {
- transform: translateY(-50%) scale(0.9);
- }
-
- .inforgraphics_section .wrapper i:hover {
- background: #f2f2f2;
- }
-
- .inforgraphics_section .wrapper i:first-child {
- left: 0px;
- display: none;
- z-index: 999;
- }
-
- .inforgraphics_section .wrapper i:last-child {
- right: 0px;
- }
-
- .carousel {
- display: flex;
- max-width: 700px;
- overflow-x: scroll;
- scroll-snap-type: x mandatory;
- scroll-behavior: smooth;
- }
-
- .carousel-inner {
- display: flex;
- flex-wrap: nowrap;
- }
-
- .slide {
- flex: 0 0 calc(100% / 3);
- scroll-snap-align: start;
- padding: 20px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .carousel img {
- object-fit: contain;
-
- height: auto;
- border-radius: 8px;
- }
-
- .carousel-inner p {
- text-align: center;
- margin: 10px 0;
- font-size: 14px;
- white-space: normal;
- word-wrap: break-word;
- }
-
- @media screen and (max-width: 768px) {
- .inforgraphics_section .wrapper {
- max-width: 100%;
- }
-
- .carousel-inner p {
- font-size: 20px;
- }
-
- .inforgraphics_section .wrapper i:first-child {
- left: 0;
- /* margin-left: 14px; */
- z-index: 99;
- }
-
- .inforgraphics_section .wrapper i:last-child {
- right: 0;
- z-index: 99;
- display: block !important;
- }
-
- .carousel {
- overflow-x: hidden;
- }
-
- .slide {
- flex: 0 0 100%;
- margin-right: 0;
- }
- }
-</style>
-
-<div class="inforgraphics_section">
- <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
- <div class="wrapper">
- <i id="left" class="fas fa-angle-left"></i>
- <div class="carousel">
- <div class="carousel-inner">
- {%- if homeData.infographics -%} {% for item in homeData.infographics %}
- <div class="slide">
- <img
- loading="lazy"
- src="{{ item.image }}"
- alt="img"
- draggable="false"
- />
- <p class="infographic-desc">{{ item.description | capitalize }}</p>
- </div>
- {% endfor %} {%- else -%} {% for item in featureData.infographics %}
- <div class="slide">
- <img
- loading="lazy"
- src="{{ item.image }}"
- alt="img"
- draggable="false"
- />
- <p class="infographic-desc">{{ item.description | capitalize }}</p>
- </div>
- {% endfor %} {%- endif -%}
- </div>
- </div>
- <i id="right" class="fas fa-angle-right"></i>
- </div>
-</div>
-
-<script>
- const carousel = document.querySelector(".carousel-inner"),
- firstImg = carousel.querySelectorAll("img")[0],
- arrowIcons = document.querySelectorAll(".wrapper i");
-
- 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";
- }
-
- 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";
- };
-
- arrowIcons.forEach((icon) => {
- icon.addEventListener("click", () => {
- let firstImgWidth = firstImg.clientWidth + 40;
- const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
- carousel.scrollBy({
- left: "100vw",
- behavior: "smooth",
- });
- setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
- });
- });
-
- // 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;
-
- // 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;
-
- // 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;
- // }
-
- // const dragStart = (e) => {
- // // updatating global variables value on mouse down event
- // isDragStart = true;
- // prevPageX = e.pageX || e.touches[0].pageX;
- // prevScrollLeft = carousel.scrollLeft;
- // }
-
- // 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>
+<style>
+ .inforgraphics_section {
+ width: 100%;
+ padding: 50px 0px 50px 0px;
+ border-top: 1px solid rgb(224, 224, 224);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .inforgraphics_section .wrapper {
+ display: flex;
+ max-width: 700px;
+ position: relative;
+ }
+
+ .inforgraphics_section .wrapper i {
+ top: 50%;
+ height: 44px;
+ width: 44px;
+ color: #343f4f;
+ cursor: pointer;
+ 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;
+ }
+
+ .inforgraphics_section .wrapper i:active {
+ transform: translateY(-50%) scale(0.9);
+ }
+
+ .inforgraphics_section .wrapper i:hover {
+ background: #f2f2f2;
+ }
+
+ .inforgraphics_section .wrapper i:first-child {
+ left: 0px;
+ display: none;
+ z-index: 999;
+ }
+
+ .inforgraphics_section .wrapper i:last-child {
+ right: 0px;
+ }
+
+ .carousel {
+ display: flex;
+ max-width: 700px;
+ overflow-x: scroll;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+ }
+
+ .carousel-inner {
+ display: flex;
+ flex-wrap: nowrap;
+ }
+
+ .slide {
+ flex: 0 0 calc(100% / 3);
+ scroll-snap-align: start;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .carousel img {
+ object-fit: contain;
+
+ height: auto;
+ border-radius: 8px;
+ }
+
+ .carousel-inner p {
+ text-align: center;
+ margin: 10px 0;
+ font-size: 14px;
+ white-space: normal;
+ word-wrap: break-word;
+ }
+
+ @media screen and (max-width: 768px) {
+ .inforgraphics_section .wrapper {
+ max-width: 100%;
+ }
+
+ .carousel-inner p {
+ font-size: 20px;
+ }
+
+ .inforgraphics_section .wrapper i:first-child {
+ left: 0;
+ /* margin-left: 14px; */
+ z-index: 99;
+ }
+
+ .inforgraphics_section .wrapper i:last-child {
+ right: 0;
+ z-index: 99;
+ display: block !important;
+ }
+
+ .carousel {
+ overflow-x: hidden;
+ }
+
+ .slide {
+ flex: 0 0 100%;
+ margin-right: 0;
+ }
+ }
+</style>
+
+<div class="inforgraphics_section">
+ <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+ <div class="wrapper">
+ <i id="left" class="fas fa-angle-left"></i>
+ <div class="carousel">
+ <div class="carousel-inner">
+ {%- if homeData.infographics -%} {% for item in homeData.infographics %}
+ <div class="slide">
+ <img
+ loading="lazy"
+ src="{{ item.image }}"
+ alt="img"
+ draggable="false"
+ />
+ <p class="infographic-desc">{{ item.description | capitalize }}</p>
+ </div>
+ {% endfor %} {%- else -%} {% for item in featureData.infographics %}
+ <div class="slide">
+ <img
+ loading="lazy"
+ src="{{ item.image }}"
+ alt="img"
+ draggable="false"
+ />
+ <p class="infographic-desc">{{ item.description | capitalize }}</p>
+ </div>
+ {% endfor %} {%- endif -%}
+ </div>
+ </div>
+ <i id="right" class="fas fa-angle-right"></i>
+ </div>
+</div>
+
+<script>
+ const carousel = document.querySelector(".carousel-inner"),
+ firstImg = carousel.querySelectorAll("img")[0],
+ arrowIcons = document.querySelectorAll(".wrapper i");
+
+ 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";
+ }
+
+ 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";
+ };
+
+ arrowIcons.forEach((icon) => {
+ icon.addEventListener("click", () => {
+ let firstImgWidth = firstImg.clientWidth + 40;
+ const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+ carousel.scrollBy({
+ left: "100vw",
+ behavior: "smooth",
+ });
+ setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+ });
+ });
+
+ // 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;
+
+ // 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;
+
+ // 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;
+ // }
+
+ // const dragStart = (e) => {
+ // // updatating global variables value on mouse down event
+ // isDragStart = true;
+ // prevPageX = e.pageX || e.touches[0].pageX;
+ // prevScrollLeft = carousel.scrollLeft;
+ // }
+
+ // 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>