أفضل 10 أعضاء في هذا الأسبوع
chahimdz
 
omarpop23
 
ahmdsat
 

المتواجدون الآن ؟
ككل هناك 5 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 5 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 178 بتاريخ 25/8/2016, 3:35 pm
احصائيات
هذا المنتدى يتوفر على 1121 عُضو.
آخر عُضو مُسجل هو ابن النيل فمرحباً به.

أعضاؤنا قدموا 220 مساهمة في هذا المنتدى في 47 موضوع
تسجيل صفحاتك المفضلة في مواقع خارجية

تسجيل صفحاتك المفضلة في مواقع خارجية digg  تسجيل صفحاتك المفضلة في مواقع خارجية delicious  تسجيل صفحاتك المفضلة في مواقع خارجية reddit  تسجيل صفحاتك المفضلة في مواقع خارجية stumbleupon  تسجيل صفحاتك المفضلة في مواقع خارجية slashdot  تسجيل صفحاتك المفضلة في مواقع خارجية yahoo  تسجيل صفحاتك المفضلة في مواقع خارجية google  تسجيل صفحاتك المفضلة في مواقع خارجية blogmarks  تسجيل صفحاتك المفضلة في مواقع خارجية live      

قم بحفض و مشاطرة الرابط موقع احلى مطور على موقع حفض الصفحات

لونك المفضل

هــــــام

ابتداءً من يوم 16 يناير 2018 سيتم الرد علي المشاكل بعد فترات متفاوته وذلك لانني سوف التحق بالجيش، دعواتكم


موقع احلى مطور :: الأرشيف & السلة :: ارشيف مشاكل التومبلايت و الأكواد

طلب تعديل كود سلايد شو

avatar
طلب تعديل كود وجدته في احدى مواقع الانجليزي ويوجد اكواد خرى لسلايد شو باشكال جميلة 
واود ان يتم تديل الكود ليتوافق مع منتدى احلى منتدى 

وهذا هو الموقع 



وهذا الشكل الذي اعجبني ود يتعدل كود عليه 

avatar
اسف علي التأخير في الرد لكني كنت في الجيش
اليك حل مشكلتك

قم بالبحث عن

الكود:
</head>
في قالب ال overall_header
ثم الصق الكود التالي اعلاه
الكود:
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <style>
      .hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}

.thumbnail {
    padding: 0;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
}
#slider-thumbs {
    height: 565px;
    overflow-y: scroll;
    white-space: nowrap;
}
    </style>
ثم سجل وانشر

ثم توجه الي التشكيلات العامة او اي مكان يقبل ال HTML و ضع فيه كود السلايدر التالي
الكود:
<div class="container">
    
 <div id="main_area">
        
 <!--  Slider  -->        
 <div class="row">
            
 <div id="slider-thumbs" class="col-sm-3">
                
 <!--  Bottom switcher of slider  -->                
 <ul class="hide-bullets">
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-0" class="thumbnail">                            <img src="http://placehold.it/150x150&text=zero" />                        </a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-1" class="thumbnail"><img src="http://placehold.it/150x150&text=1" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-2" class="thumbnail"><img src="http://placehold.it/150x150&text=2" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-3" class="thumbnail"><img src="http://placehold.it/150x150&text=3" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-4" class="thumbnail"><img src="http://placehold.it/150x150&text=4" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-5" class="thumbnail"><img src="http://placehold.it/150x150&text=5" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-6" class="thumbnail"><img src="http://placehold.it/150x150&text=6" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-7" class="thumbnail"><img src="http://placehold.it/150x150&text=7" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-8" class="thumbnail"><img src="http://placehold.it/150x150&text=8" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-9" class="thumbnail"><img src="http://placehold.it/150x150&text=9" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-10" class="thumbnail"><img src="http://placehold.it/150x150&text=10" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-11" class="thumbnail"><img src="http://placehold.it/150x150&text=11" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-12" class="thumbnail"><img src="http://placehold.it/150x150&text=12" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-13" class="thumbnail"><img src="http://placehold.it/150x150&text=13" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-14" class="thumbnail"><img src="http://placehold.it/150x150&text=14" /></a>                    
 </li>
                    
 <li class="col-sm-12">
                        <a id="carousel-selector-15" class="thumbnail"><img src="http://placehold.it/150x150&text=15" /></a>                    
 </li>
                
 </ul>
            
 </div>
            
 <div class="col-sm-8">
                
 <div id="slider" class="col-xs-12">
                    
 <!--  Top part of the slider  -->                    
 <div class="row">
                        
 <div id="carousel-bounding-box" class="col-sm-12">
                            
 <div id="myCarousel" class="carousel slide">
                                
 <!--  Carousel items  -->                                
 <div class="carousel-inner">
                                    
 <div data-slide-number="0" class="active item">
                                        <img src="http://placehold.it/470x480&text=zero" />
 </div>
                                    
 <div data-slide-number="1" class="item">
                                        <img src="http://placehold.it/470x480&text=1" />
 </div>
                                    
 <div data-slide-number="2" class="item">
                                        <img src="http://placehold.it/470x480&text=2" />
 </div>
                                    
 <div data-slide-number="3" class="item">
                                        <img src="http://placehold.it/470x480&text=3" />
 </div>
                                    
 <div data-slide-number="4" class="item">
                                        <img src="http://placehold.it/470x480&text=4" />
 </div>
                                    
 <div data-slide-number="5" class="item">
                                        <img src="http://placehold.it/470x480&text=5" />
 </div>
                                                                        
 <div data-slide-number="6" class="item">
                                        <img src="http://placehold.it/470x480&text=6" />
 </div>
                                                                        
 <div data-slide-number="7" class="item">
                                        <img src="http://placehold.it/470x480&text=7" />
 </div>
                                                                        
 <div data-slide-number="8" class="item">
                                        <img src="http://placehold.it/470x480&text=8" />
 </div>
                                                                        
 <div data-slide-number="9" class="item">
                                        <img src="http://placehold.it/470x480&text=9" />
 </div>
                                                                        
 <div data-slide-number="10" class="item">
                                        <img src="http://placehold.it/470x480&text=10" />
 </div>
                                                                        
 <div data-slide-number="11" class="item">
                                        <img src="http://placehold.it/470x480&text=11" />
 </div>
                                                                        
 <div data-slide-number="12" class="item">
                                        <img src="http://placehold.it/470x480&text=12" />
 </div>
                                    
 <div data-slide-number="13" class="item">
                                        <img src="http://placehold.it/470x480&text=13" />
 </div>
                                    
 <div data-slide-number="14" class="item">
                                        <img src="http://placehold.it/470x480&text=14" />
 </div>
                                    
 <div data-slide-number="15" class="item">
                                        <img src="http://placehold.it/470x480&text=15" />
 </div>
                                
 </div>
                                
 <!--  Carousel nav  -->                                <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control">                                    <span class="glyphicon glyphicon-chevron-left"></span>                                </a>                                <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control">                                    <span class="glyphicon glyphicon-chevron-right"></span>                                </a>                            
 </div>
                        
 </div>
                    
 </div>
                
 </div>
            
 </div>
            
 <!-- /Slider -->        
 </div>
    
 </div>
</div>
    <script>
                                      jQuery(document).ready(function($) {
 
        $('#myCarousel').carousel({
                interval: 5000
        });
 
        //Handles the carousel thumbnails
        $('[id^=carousel-selector-]').click(function () {
        var id_selector = $(this).attr("id");
        try {
            var id = /-(\d+)$/.exec(id_selector)[1];
            console.log(id_selector, id);
            jQuery('#myCarousel').carousel(parseInt(id));
        } catch (e) {
            console.log('Regex failed!', e);
        }
    });
        // When the carousel slides, auto update the text
        $('#myCarousel').on('slid.bs.carousel', function (e) {
                 var id = $('.item.active').data('slide-number');
                $('#carousel-text').html($('#slide-content-'+id).html());
        });
});
                                      </script>
avatar
خلاص شكرا لك يغلق
avatar
تم حل المشكلة & ينقل للأرشيف.
ادارة موقع احلى مطور

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول