تهيئات

Enter your text here...

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>الانتقال الجانبي بطريقة التمرير</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
}

.swiper-container {
width: 100%;
height: calc(100vh - 60px); /* خصم ارتفاع الشريط العلوي */
}

.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
color: white;
height: 100vh;
}

.page1 {
background-color: #007bff; /* لون الصفحة 1 */
}

.page2 {
background-color: #dc3545; /* لون الصفحة 2 */
}

.page3 {
background-color: #ffc107; /* لون الصفحة 3 */
}

.page4 {
background-color: #28a745; /* لون الصفحة 4 */
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 60px;
background-color: #333;
color: white;
}

nav a {
color: white;
text-decoration: none;
padding: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<nav>
<a href="#" class="tab-link">الصفحة 1</a>
<a href="#" class="tab-link">الصفحة 2</a>
<a href="#" class="tab-link">الصفحة 3</a>
<a href="#" class="tab-link">الصفحة 4</a>
</nav>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide page1">الصفحة 1</div>
<div class="swiper-slide page2">الصفحة 2</div>
<div class="swiper-slide page3">الصفحة 3</div>
<div class="swiper-slide page4">الصفحة 4</div>
</div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true
});

document.querySelectorAll('.tab-link').forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
swiper.slideTo(this.getAttribute('data-slide'));
});
});
});
</script>
</body>
</html>