$(document).ready(function () {
const hotelSlider = new Swiper(".hotel-slider", {
keyboard: {
enabled: true,
onlyInViewport: false,
},
// Optional parameters
loop: true,
// Navigation arrows
navigation: {
nextEl: ".hotel-slider__button--next",
prevEl: ".hotel-slider__button--prev",
},
effect: "coverflow",
});
const reviewsSlider = new Swiper(".reviews-slider", {
// keyboard: {
// enabled: true,
// onlyInViewport: false,
// },
// Optional parameters
loop: false,
// Navigation arrows
navigation: {
nextEl: ".reviews-slider__button--next",
prevEl: ".reviews-slider__button--prev",
},
});
$(".modal__form").validation();
var menuButton = document.querySelector(".menu-button");
menuButton.addEventListener("click", function () {
console.log("Click on menu");
document
.querySelector(".navbar-bottom")
.classList.toggle("navbar-bottom__visible");
});
var modalButton = $("[data-toggle=modal]");
var closeModalButton = $(".modal__close");
modalButton.on("click", openModal);
closeModalButton.on("click", closeModal);
$(document).on("keydown", function (event) {
if (event.key == "Escape") {
closeModal(event);
}
});
function openModal() {
var modaOverlay = $(".modal__overlay");
var modaDialog = $(".modal__dialog");
modaOverlay.addClass("modal__overlay_visible");
modaDialog.addClass("modal__dialog_visible");
}
function closeModal(event) {
event.preventDefault();
var modaOverlay = $(".modal__overlay");
var modaDialog = $(".modal__dialog");
modaOverlay.removeClass("modal__overlay_visible");
modaDialog.removeClass("modal__dialog_visible");
}
});
<div class="modal">
<div class="modal__overlay"></div>
<!-- /.modal__overlay -->
<div class="modal__dialog">
<a href="" class="modal__close">
<img src="img/close.svg" alt="Icon: close" />
</a>
<h3 class="modal__title modal__title--mb-3">Booking</h3>
<form action="send.php" method="POST" class="modal__form">
<input
type="text"
class="input modal__input"
placeholder="Your Full Name*"
name="name"
/>
<input
type="text"
class="input modal__input"
placeholder="Phone Number*"
name="phone"
/>
<input
type="text"
class="input modal__input"
placeholder="Your email*"
name="email"
/>
<textarea
class="message modal__message"
placeholder="Message"
name="message"
></textarea>
<button class="button modal__button" type="submit">Send</button>
<span class="modal__info">* Required Fields</span>
</form>
</div>
<!-- /.modal__dialog -->
</div>
<!-- /.modal -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/main.js"></script>