تعديل تنسيقات تصميم واجهة موقع

بالنسبة للمشكلة الثانية , لاحظ الكود الخاص به

        <div class="logo-goo">//سوف نعطيه بعض الأصناف
            <span class="logo mr-auto"></span>//سوف نحذف الصنف mr-auto
            <i class="fa fa-umbrella-beach fa-3x"></i>
            </span>
            <div class="text ">
                <h2>DIAGOONA</h2>
                <p>new bootstrap template</p>
            </div>
        </div>

بعد التعديل يصبح كالتالي

        <div class="logo-goo d-flex align-items-center">
                             ^^^^^^^^^^^^^^^^^^^^^^^^^
            <span class="logo"></span>
            <i class="fa fa-umbrella-beach fa-3x"></i>
            </span>
            <div class="text ">
                <h2>DIAGOONA</h2>
                <p>new bootstrap template</p>
            </div>
        </div>

سوف يعرض اللوجو بجانب النص
أما بالنسبة للكود لا يعمل فهو بسبب أنك لم تقم بتضمين ملف js.js

    <script src="js/js.js"></script>

أرجو منك اضافة السطر , بالنسبة  slides.lenght , لاحظ الكود التالي

var slides = document.getElementsByClassName("mySlides");

لقد قمنا بجلب جميع العناصر التي لديها الصنف mySlides, نريد ان تقوم بعدهم, نستطيع فعل ذلك كالتالي

slides.length

حيث أن الخاصية length تقوم بارجاع عدد العناصر في المصفوفة, أما بالنسبة ل n, لاحظ كود جافاسكربت وكود html 

كود جافاسكربت
function showSlides(n) {

كود html
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>

لاحظ أن الدالة المعرفة في جافاسكربت تستقبل متغير اسمه n , أي عند استدعاءها يجب أن نقوم بتمرير قيمة لها, لاحظ كود html , لقد قمنا باستدعاءها ثلاثة مرات, في كل مرة مررنا قيمة n بقيمة مختلفة , في المرو ألأولى قيمة المتغير n تساوي 1 والمرة الثانية تساوي 2 والمرة الأخيرة والثالثة 3 , ويمكننا استخدام هذه القيمة في الكود الذي ارفقه لك المدرب, سوف تواجهم مشكلة في الكود المرفق وبالتحديد في هذا السطر

slides[slideIndex - 1].style.display = "block"; 

أرجو منك حذفه وتعديل الكود كالآتي

function showSlides(n) {
    var i;

    var slides = document.getElementsByClassName("mySlides"); // تحديد كامل الشرائح

    var dots = document.getElementsByClassName("dot"); // تحديد كامل الدوائر

    if (n > slides.length) { slideIndex = 1 } // تحديد الشريحة الاولى كمفعلة

    if (n < 1) { slideIndex = slides.length } // تحديد الشريحة الأخيرة كمفعلة 

    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; // إخفاء كامل الشرائح
        if (i+1 == n) {
            slides[i].style.display = "block"; 
        }
    }

}