انشاء سلايدر

محمود الساعور2 · 11 أغسطس

مرحبا جميعا احاول من فترة محاولة انشاء سلايدر كالذي بالمقطع بلغة html & css & java script لكنني لم انجح بذلك لأنني مبتدء وبحثت كثيرا على الانترنت لشرح انشاء سلايدر مماثل للذي بهذا التطبيق لكنني لم اجد هل بإمكان احدكم مساعدتي من فضلكم ؟

محمد عاطف17 · 12 أغسطس

هذا ال slider في تطوير الويب يسمي carousel وتوجد العديد من الكتبات التي تساعدك علي إنشاء مثل هذا ال slider كل ما عليك هو البحث عن carousel وستجد العديد من الشروحات سواء على التوثيقات الرسمية الخاص بالمكتبة أو فيديوهات علي يوتيوب .

وأشهر مكتبة هي owlcarousel و أيضا bootstrap يوجد بها carousel .

وهذا هو التوثيق الرسمي الخاص بمكتبة owlcarousel :

https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

يمكنك البحث فيه للتعلم عن الخصائص التي توجد بالمكتبة وكيفية إستخدامها .

وقد قمت بإنشاء كود بسيط لك لإنشاء slider بسيط :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .item {
            background-color: turquoise;
            height: 200px;
            width: 200px;
            color: blue;
            text-align: center;
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <div class="owl-carousel owl-theme">
        <div class="item">
            <h4>1</h4>
        </div>
        <div class="item">
            <h4>2</h4>
        </div>
        <div class="item">
            <h4>3</h4>
        </div>
        <div class="item">
            <h4>4</h4>
        </div>
        <div class="item">
            <h4>5</h4>
        </div>
        <div class="item">
            <h4>6</h4>
        </div>
        <div class="item">
            <h4>7</h4>
        </div>
        <div class="item">
            <h4>8</h4>
        </div>
        <div class="item">
            <h4>9</h4>
        </div>
        <div class="item">
            <h4>10</h4>
        </div>
        <div class="item">
            <h4>11</h4>
        </div>
        <div class="item">
            <h4>12</h4>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        })
    </script>
</body>

</html>