How to make Swipers Image slider responsive and well fited in my modal?

Question

 // Modal // Get DOM Elements const modals = document.querySelectorAll(".modal"); const modalBtns = document.querySelectorAll(".button"); const closeBtns = document.querySelectorAll(".close"); // Events modalBtns.forEach((btn, index) => btn.addEventListener("click", () => openModal(index)) ); closeBtns.forEach((btn, index) => btn.addEventListener("click", () => closeModal(index)) ); // for closing when you click outside modals.forEach((modal, index) => modal.addEventListener("click", (e) => { if(e.target === e.currentTarget){ closeModal(index); } }) ); // Open function openModal(index) { modals[index].style.display = "block"; } // Close function closeModal(index) { modals[index].style.display = "none"; } // End Modal const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: true, spaceBetween: 30, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, });

 /* Swiper styling */.swiper { width: 800px; height: 300px; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Modal section styling */:root { --modal-duration: 1s; --modal-color: crimson; }.button { font-family: 'poppins', sans-serif; display: inline-block; background: crimson; color: #fff; font-size: 18px; font-weight: 500; padding: 8px 16px; margin-top: 20px; border-radius: 6px; border: 2px solid crimson; transition: all 0.3s ease; }.button:hover { color: crimson; background: none; }.modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }.modal-content { margin: 50px auto; width: 60%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); animation-name: modalopen; animation-duration: var(--modal-duration); }.modal-header h2, .modal-footer h3 { margin: 0; }.modal-header { background: var(--modal-color); text-align: center; padding: 10px; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; }.modal-body { padding: 10px 5px 1px 5px; background: #fff; }.modal-footer { background: var(--modal-color); padding: 10px; font-size: 15px; font-weight: lighter; color: #fff; text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }.close { color: #ccc; float: right; font-size: 30px; color: #fff; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }.responsive { width: 100%; height: auto; } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } }

 <head> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> </head> <body> <;-- Modal Button 1 start --> <button id="modal-btn" class="button">Modal Button</button> <div id="my-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times.</span> <h3>Vehicle Parking Web-Application</h3> </div> <div class="modal-body"> <.-- Slider main container --> <div class="swiper"> <.-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <img src="images/parkit.png" alt="Slide 1"> </div> <div class="swiper-slide"> <img src="images/InverntoryMS.png" alt="Slide 2"> </div> <div class="swiper-slide"> <img src="images/Airi.png" alt="Slide 3"> </div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div>

I am making a portfolio for myself. I am facing a problem while using Swiper in my modal button. Images are not well fitted and responsive in my modal body. I have looked everywhere for the solution but can't find any proper solution anywhere. If anyone can help me with this, I will be grateful. I am attaching my code below.

Answer 1

you can try with this code:

.swiper {
width: 800px;
height: 300px;
max-width: 100%;

}

you can add max-width:100% only

How to make Swipers Image slider responsive and well fited in my modal?

Question

1 answers

solution1
0 2022-02-24 04:33:56

How to make Swipers Image slider responsive and well fited in my modal?

Question

1 answers

solution1 0 2022-02-24 04:33:56

solution1
0 2022-02-24 04:33:56