File manager - Edit - /home/monara/public_html/swarnawahini_web/components/logos.php
Back
<!-- Swiper Slider Structure --> <div> <div class="swiper-container"> <!-- Swiper Container --> <div class="swiper logo-slider"> <!-- Swiper Wrapper --> <div class="swiper-wrapper"> <!-- Swiper Slides --> <div class="swiper-slide"> <a href="http://efm.lk/" target="_blank"><img src="/Uploads/efm.png" alt="TV Channel Logo"></a> </div> <div class="swiper-slide"> <img src="/Uploads/etv.png" alt="TV Channel Logo"> </div> <div class="swiper-slide"> <a href="http://ranfm.lk/" target="_blank"><img src="/Uploads/ran2.png" alt="TV Channel Logo"> </div> <div class="swiper-slide"> <a href="http://shreefm.lk/" target="_blank"><img src="/Uploads/sri.png" alt="TV Channel Logo"> </div> <div class="swiper-slide"> <a href="https://swarnavahini.lk/"><img src="/Uploads/logo.png" alt="TV Channel Logo"> </div> </div> <!-- Pagination Dots --> </div> </div> </div> <!-- Swiper CSS (Include this if not already included in your project) --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <!-- Swiper Initialization Script --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const logoSlider = new Swiper('.logo-slider', { slidesPerView: 5, // Show 5 logos on desktop spaceBetween: 10, // 10px space between slides loop: true, // Enable infinite loop autoplay: { delay: 3000, // Slide every 3 seconds disableOnInteraction: false, // Continue autoplay after user interaction }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 0: { slidesPerView: 1, spaceBetween: 8, }, 768: { slidesPerView: 3, spaceBetween: 10, }, 992: { slidesPerView: 5, spaceBetween: 10, }, }, }); }); </script> <style> /* Swiper Glassy Container */ .swiper-container { max-width: 1200px; margin: 40px auto; padding: 20px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); color: white; } .logo-slider { padding: 0 20px; /* Inner padding for navigation and pagination */ } .swiper-slide { background: rgba(255, 255, 255, 0.15); /* Glassy background for slides */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 10px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); padding: 1.25rem; text-align: center; display: flex; justify-content: center; align-items: center; height: auto; /* Allow height to adjust to content */ } .swiper-slide img { height: 50px; width: auto; display: block; margin: 0 auto; } .swiper-button-prev, .swiper-button-next { color: #ffffff; /* White arrows for visibility */ } .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.5); /* Glassy pagination dots */ } .swiper-pagination-bullet-active { background: #FFC107; /* Active dot matches button color */ } /* Responsive Adjustments for Swiper */ @media (max-width: 991px) { .swiper-container { border-radius: 10px; } .swiper-slide { border-radius: 10px; } } @media (max-width: 576px) { .swiper-container { border-radius: 8px; } .swiper-slide { border-radius: 8px; } .swiper-slide img { height: 40px; /* Slightly smaller logo on mobile */ } } </style>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.26 |
proxy
|
phpinfo
|
Settings