كيفاش تصاوب slider ب jquery


فهاد الدرس الجديد من سلسلة jquery غادي نشوفو كيفاش نقادو slider باستعمال jquery cycle plugin لي كيمكنا باش نقادو des sliders ب jquery بطريقة سهلة وبسيطة هاد slider يمكنلك تخدم به فالموقع ديالك بكل سهولة.

نظرة سريعة بالفيديو

1- الملف script.js

أول حاجة غادي تزيد مشروع جديد فين ما بغيتي و سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.html و style.css و script.js من بعد فتحو ف navigateur من بعد غادي تمشي للملف  script.js كتزيد فيه الكود لي كيزيد ال methode cycle للclass imageSlider ولي فيها كنحدد les options ديال slider فكنعطيه ل fx لي كتحدد l'effet لي غادي يديرو التصاور منبعد كاين pause لي كتحدد شحال من ثانية باش يتحرك slider من بعد كنحدد الروابط لي كيمكنوا باش نمشي للصورة التالية او نرجع لسابقة وللمزيد من المعلومات شوف الموقع الرسمي ديال ل plugin من هنا الكود ديال الملف هو :


                                $(document).ready(function() {
    $('.imageSlider').cycle({
        fx: 'shuffle',
        pause: 1,
        prev: '#prev',
        next: '#next'
    });
});
                            

2- الملف index.html

فالملف index.html كاين الروابط ديال ملفات css وjs لي غادي نحتاجو من بعد عندنا div لي فيها ل class imageSlider ولي غادي يكونوا فيها les images ديالنا ولي كاينين فالمجلد img غادي تلقاه فsource code من بعد كاين الروابط لي كيمكنوا من التنقل بين الصور الكود ديال الملف هو :

                                <!DOCTYPE html>
<html>

<head>
    <title>DarijaCoding Slider</title>
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script src="http://malsup.github.io/jquery.cycle.all.js"></script>
</head>

<body>
    <div class="container">
        <h1>DarijaCoding</h1>
        <div class="imageSlider">
            <img src="img/image1.jpg" width="640" height="426">
            <img src="img/image2.jpg" width="640" height="426">
            <img src="img/image3.jpg" width="640" height="426">
            <img src="img/image4.jpg" width="640" height="426">
            <img src="img/image5.jpg" width="640" height="426">
        </div>

        <ul id="nav">
            <li id="prev">
                <a href="#"></a>
            </li>
            <li id="next">
                <a href="#"></a>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>

</html>
                            

3- الملف style.css

فيه غادي يكونوا les styles ديالنا لي غادي نضيفوا بهم تغييرات على design ديال la page ديالنا الكود ديال الملف هو:

                                * {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    background: #34495e;
}

h1 {
    font-family: 'Dancing Script', cursive;
    text-align: center;
    color: #FFF;
    font-size: 50px;
    margin-bottom: 30px;
}

.container {
    width: 635px;
    margin: 100px auto 0 auto;
    position: relative;
}

.imageSlider {
    height: 332px;
}

.imageSlider img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
}

#nav {
    list-style-type: none;
    z-index: 150;
}

#nav li a {
    display: block;
    width: 58px;
    height: 102px;
    text-indent: -9999px;
    outline: none;
}

#prev a {
    background: url(../img/prev_image.png);
    width: 58px;
    height: 102px;
    position: absolute;
    top: 240px;
    left: -70px;
}

#next a {
    background: url(../img/next_image.png);
    width: 58px;
    height: 102px;
    position: absolute;
    top: 240px;
    right: -110px;
}

#next a:hover {
    background: url(../img/next_h.png);
}

#prev a:hover {
    background: url(../img/prev_h.png);
}
                            


بحث في الموقع


إشترك للتوصل بالجديد