لدي مشكلة في معرض الصور الخاص بالموقع الشخصي،
الصور لا تملأ المساحة المحددة والدوائر الخاصة للضغط لتنقل عبر الصور صغيرة جدا.
وجزاكم الله خيراً.
كود HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="موقع شخصي لهنا صقر">
<meta name="author" content="Hana Sakr">
<title>Hana's personal website</title>
<link rel="stylesheet" href="./css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><i class="fas fa-user-circle"></i> صفحة <span class="highlight"> اسم الطالب </span></h1>
</div>
<nav>
<ul>
<li class="current"> <a href="index.html"> الصفحة الرئيسية</a></li>
<li><a href="gallery.html"> معرض الاعمال</a> </li>
</ul>
</nav>
</div>
</header>
<section class="main">
<section id="slider" class="container">
<div id="wrapper">
<div class="content">
<img src="img/clouds.jpeg">
</div>
<div class="content">
<img src="img/butterfly.jpeg">
</div>
<div class="content">
<img src="img/stars.jpeg">
</div>
<div class="content">
<img src="img/wave.jpeg">
</div>
</div>
<div id ="navLinks">
<ul>
<li class="itemLinks" data-pos="0"></li>
<li class="itemLinks" data-pos="1"></li>
<li class="itemLinks" data-pos="2"></li>
<li class="itemLinks" data-pos="3"></li>
</ul>
</div>
</section>
</section>
<section id="footer">
<p>blablabla © <span id="currentYear"></span></p>
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/slider.js"></script>
</html>
كو CSS:
#slider{
position: relative;
margin: auto;
margin-top: 20px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#wrapper {
width: 400%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
#wrapper .content {
float: right;
width: 25%;
height: 100%;
}
#wapper .content img{
width: 100%;
}
#navLinks{
text-align: center;
position: absolute;
top: 0;
right: 45%;
}
#navLinks ul{
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLins ul li{
float: right;
text-align: center;
margin: 10px;
padding: 5px;
cursor: pointer;
background-color: blanchedalmond;
list-style: none;
border: black 5px solid;
border-radius: 50%;
}
#navLinks ul li:hover{
background-color: brown;
}
#navLinks ul li.active{
background-color: blue;
}
#navLinks ul li.active:hover{
background-color: rgb(154, 133, 129);
}
مرفق الملفات:
gallery.html slider.css
