_includes/infographics/infographics.html in appscms-tools-theme-3.7.0 vs _includes/infographics/infographics.html in appscms-tools-theme-3.7.1
- old
+ new
@@ -1,123 +1,221 @@
<style>
- /* Reset default browser styles */
-
- .infographic {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 50px auto;
- max-width: 800px;
+ .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;
}
- .infographic-item {
- flex-basis: 30%;
- text-align: center;
+
+ .inforgraphics_section .wrapper {
+ display: flex;
+ max-width: 700px;
+ position: relative;
}
- .infographic-item img {
- max-width: 100%;
- height: auto;
- border-radius: 8px;
- margin-bottom: 10px;
+ .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;
}
- .infographic-item h3 {
- font-size: 20px;
- margin-bottom: 10px;
+ .inforgraphics_section .wrapper i:active {
+ transform: translateY(-50%) scale(0.9);
}
- .infographic-item p {
- font-size: 16px;
+ .inforgraphics_section .wrapper i:hover {
+ background: #f2f2f2;
}
- @media (max-width: 600px) {
- .infographic {
- flex-wrap: wrap;
- }
+ .inforgraphics_section .wrapper i:first-child {
+ left: 0px;
+ display: none;
+ z-index: 999;
+ }
- .infographic-item {
- flex-basis: 100%;
- margin-bottom: 30px;
- }
+ .inforgraphics_section .wrapper i:last-child {
+ right: 0px;
}
- </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 featureData.infographics -%}
- <div class="infographic-item">
- <img src="{{item.image}}" alt="Image 1">
- <p class="infographic-desc">{{item.description | capitalize }}</p>
- </div>
- {%- endfor -%}
- </div>
+ .carousel {
+ display: flex;
+ max-width: 700px;
+ overflow-x: scroll;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+ }
- <!-- <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 -%}
+ .carousel-inner {
+ display: flex;
+ flex-wrap: nowrap;
+ }
+
+ .slide {
+ flex: 0 0 calc(100% / 3);
+ scroll-snap-align: start;
+ padding: 20px;
+ }
+
+ .carousel img {
+ width: 100%;
+ object-fit: contain;
+ max-width: 100%;
+ 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">
+ {% for item in featureData.infographics %}
+ <div class="slide">
+ <img src="{{ item.image }}" alt="img" draggable="false">
+ <p class="infographic-desc">{{ item.description | capitalize }}</p>
</div>
+ {% endfor %}
</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> -->
+ <i id="right" class="fas fa-angle-right"></i>
+ </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;
+<script>
+ const carousel = document.querySelector(".carousel-inner"),
+ firstImg = carousel.querySelectorAll("img")[0],
+ arrowIcons = document.querySelectorAll(".wrapper i")
- 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 numImages = carousel.querySelectorAll("img").length;
+ const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
- const changeSlide = function (slides) {
- carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
- };
- changeSlide(currentSlide);
+ if (numImages > 3) {
+ arrowIcons[1].style.display = "block"
+ } else {
+ arrowIcons[0].style.display = "none";
+ arrowIcons[1].style.display = "none";
+ }
- 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);
- });
+ 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";
+ }
- dotsSlide.addEventListener('click', function (e) {
- if (e.target.classList.contains('dot')) {
- const slide = e.target.dataset.slide;
- changeSlide(slide);
- activeDot(slide);
- }
+ 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
});
- };
- Slider();
-</script> -->
+ });
+
+ // 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>
\ No newline at end of file