home الرئيسيةpeople_outline الأعضاء vpn_key دخول
chatالمواضيع الأخيرة
مساعده فى بعض اكوادaccess_time2019-03-18, 7:54 pmpersonActor
تنبيه صوتي للأشعارات 2019access_time2019-01-24, 9:25 pmpersonshoky
موضوع للاستغفارaccess_time2019-01-12, 1:01 pmpersonahmdsat
سجل حضورك بذكر اللهaccess_time2019-01-12, 12:58 pmpersonahmdsat
مساعده فى الفئاتaccess_time2019-01-08, 7:34 pmpersonActor
طلب تعديل في اقسام الفئاتaccess_time2019-01-04, 2:04 pmpersonActor
طلب كودaccess_time2019-01-04, 2:02 pmpersonActor
تشتاق لهم الجنةaccess_time2019-01-04, 10:38 ampersonActor
الحديث الضعيفaccess_time2019-01-04, 10:38 ampersonActor
إطعام الطعام من الإسلامaccess_time2019-01-04, 10:38 ampersonActor
new_releasesأفضل 10 أعضاء في هذا الأسبوع
new_releasesأفضل 10 أعضاء في هذا الشهر
bubble_chartالمتواجدون الآن ؟
ككل هناك 6 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 6 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

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

أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 494 بتاريخ 2019-03-19, 11:43 am

طريقة عرض الأقسام

لونك المفضل

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


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

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

https://bootsnipp.com/tags/carousel?page=2


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

https://bootsnipp.com/snippets/BE3dv

تعاليق

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

قم بالبحث عن

الكود:

</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>
في 2018-03-08, 3:17 am
digimon frontier
خلاص شكرا لك يغلق
في 2018-03-10, 9:46 pm
omarpop23
تم حل المشكلة & ينقل للأرشيف.
يرجى مراجعة : قوانين موقع احلى مطور
في 2018-12-07, 5:30 pm
ارسال رد

هــــــام

ندعوك للتسجيل في المنتدى لتتمكن من ترك رد أو تسجيل الدخول اذا كنت من اسرة المنتدى

صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى