طريقة تجزئة الهيدر و جعله متحرك

السلام عليكم و رحمة الله و بركاته

أخباركم شباب ؟

كنت محتاج كود يقوم بتقسيم الهيدر لأكثر من صورة , مثلاً خلفية و اللوجو

لكني اريد اخلي اللوجو صور متغيرة مثلاً 3 صورة بتتالى

نفس نظام الإعلانات في احلى منتدى

مثال لموقع اللي محتاج شكل الكود مثله : https://www.chewy.com

و شكراً

وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club

انا ركبت هيدر لما تضغط على السهم تتغير الصور

هل هو مناسب ام لا

كونان2000 كتب:وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club

انا ركبت هيدر لما تضغط على السهم تتغير الصور

هل هو مناسب ام لا

جميل كونان تسلم ايدك

لكن يا ريت تعديل بسيط بس

تحت الهيدر الصور المستخدمه الاعلانات عليها

فيا إما نخفي هذه الصور ، او اننا نخلي الاعلانات تحتها

هلا اخي @Fish Club
حذفت الصور الي تحت
drunken

كونان2000 كتب:هلا اخي @Fish Club
حذفت الصور الي تحت

جميل تسلم ايدك

Fish Club كتب:
كونان2000 كتب:هلا اخي @Fish Club
حذفت الصور الي تحت

جميل تسلم ايدك

هل تم الحل اخي

ابوعلي البلقاوي كتب:
Fish Club كتب:
كونان2000 كتب:هلا اخي @Fish Club
حذفت الصور الي تحت

جميل تسلم ايدك

هل تم الحل اخي

لسه منتظر كونان يرسل الكود

Fish Club كتب:
هل تم الحل اخي

لسه منتظر كونان يرسل الكود

والله اسف اخي عالتأخر Embarassed

انشغلت شويه (●ˇ∀ˇ●)
------

طريقة التركيب
ابحث في الهيدر عنالكود التالي

الكود:: <div id="header-banner"> <div class="wrap">  <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>  </div> </div>

احذفه وضع مكانه التالي

الكود:: <div id="header-banner"> <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div class="container"> <div class="mySlides"> <div class="numbertext">1 / 6</div> <img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;"> </div> <div class="mySlides"> <div class="numbertext">2 / 6</div> <img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;"> </div> <div class="mySlides"> <div class="numbertext">3 / 6</div> <img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;"> </div> <div class="mySlides"> <div class="numbertext">4 / 6</div> <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;"> </div> <div class="mySlides"> <div class="numbertext">5 / 6</div> <img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;"> </div> <div class="mySlides"> <div class="numbertext">6 / 6</div> <img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> </div> <script> let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("demo"); let captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </body> </html> </div>

ثم ضع االتالي في الcss

الكود:: body { font-family: Arial; margin: 0; } * { box-sizing: border-box; } img { vertical-align: middle; } .container { position: relative; } .mySlides { display: none; } .column { display: flex; float: right; width: 16.66%; justify-content: center; } .cursor { cursor: pointer; } .row { margin: auto !important; } .prev, .next { background: rgba(0, 0, 0, 0.8); cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .prev { right: 0; border-radius: 3px 0 0 3px; } .next { left: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .caption-container { text-align: center; background-color: #222; padding: 0px; color: white; } .container { width: auto !important; } .container { padding: inherit !important; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; }

كونان2000 كتب:
Fish Club كتب:
هل تم الحل اخي

لسه منتظر كونان يرسل الكود
والله اسف اخي عالتأخر
انشغلت شويه (●ˇ∀ˇ●)
------

طريقة التركيب
ابحث في الهيدر عنالكود التالي
الكود:
<div id="header-banner">    <div class="wrap">        <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>        </div> </div>

احذفه وضع مكانه التالي
الكود:
<div id="header-banner">   <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div class="container">   <div class="mySlides">    <div class="numbertext">1 / 6</div>    <img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;">   </div>   <div class="mySlides">    <div class="numbertext">2 / 6</div>    <img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;">   </div>   <div class="mySlides">    <div class="numbertext">3 / 6</div>    <img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;">   </div>      <div class="mySlides">    <div class="numbertext">4 / 6</div>    <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;">   </div>   <div class="mySlides">    <div class="numbertext">5 / 6</div>    <img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;">   </div>      <div class="mySlides">    <div class="numbertext">6 / 6</div>    <img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;">   </div>      <a class="prev" onclick="plusSlides(-1)">❮</a>   <a class="next" onclick="plusSlides(1)">❯</a>   <div class="caption-container">    <p id="caption"></p>   </div> </div> <script> let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {   showSlides(slideIndex += n); } function currentSlide(n) {   showSlides(slideIndex = n); } function showSlides(n) {   let i;   let slides = document.getElementsByClassName("mySlides");   let dots = document.getElementsByClassName("demo");   let captionText = document.getElementById("caption");   if (n > slides.length) {slideIndex = 1}   if (n < 1) {slideIndex = slides.length}   for (i = 0; i < slides.length; i++) {    slides[i].style.display = "none";   }   for (i = 0; i < dots.length; i++) {    dots[i].className = dots[i].className.replace(" active", "");   }   slides[slideIndex-1].style.display = "block";   dots[slideIndex-1].className += " active";   captionText.innerHTML = dots[slideIndex-1].alt; } </script>    </body> </html> </div>

ثم ضع االتالي في الcss
الكود:
body {   font-family: Arial;   margin: 0; } * {   box-sizing: border-box; } img {   vertical-align: middle; } .container {   position: relative; } .mySlides {   display: none; } .column {    display: flex;    float: right;    width: 16.66%;    justify-content: center; } .cursor {   cursor: pointer; } .row {    margin: auto !important; } .prev, .next {   background: rgba(0, 0, 0, 0.8);   cursor: pointer;   position: absolute;   top: 40%;   width: auto;   padding: 16px;   margin-top: -50px;   color: white;   font-weight: bold;   font-size: 20px;   border-radius: 0 3px 3px 0;   user-select: none;   -webkit-user-select: none; } .prev {    right: 0;    border-radius: 3px 0 0 3px; } .next {    left: 0;    border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {   background-color: rgba(0, 0, 0, 0.8); } .numbertext {   color: #f2f2f2;   font-size: 12px;   padding: 8px 12px;   position: absolute;   top: 0; } .caption-container {    text-align: center;    background-color: #222;    padding: 0px;    color: white; } .container {    width: auto !important; } .container {    padding: inherit !important; } .demo {   opacity: 0.6; } .active, .demo:hover {   opacity: 1; }