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

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



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

omarpop23
omarpop23
المؤسس
القوس
المساهمات :
477
النقاط :
1010
التقيم :
102
العمر :
26
الاوسمة :
 طلب تعديل كود سلايد شو  Crown_gold
البلد :
مصر
اسف علي التأخير في الرد لكني كنت في الجيش
اليك حل مشكلتك

قم بالبحث عن

الكود:
</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>
تقييم المساهمة: 100% (1)
Anonymous
زائر
زائر
خلاص شكرا لك يغلق
omarpop23
omarpop23
المؤسس
القوس
المساهمات :
477
النقاط :
1010
التقيم :
102
العمر :
26
الاوسمة :
 طلب تعديل كود سلايد شو  Crown_gold
البلد :
مصر
تم حل المشكلة & ينقل للأرشيف.
يرجى مراجعة : قوانين موقع احلى مطور
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى