home الرئيسيةpeople_outline الأعضاء vpn_key دخول
chatالمواضيع الأخيرة
new_releasesأفضل 10 أعضاء في هذا الأسبوع
new_releasesأفضل 10 أعضاء في هذا الشهر
bubble_chartالمتواجدون الآن ؟
ككل هناك 7 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 7 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

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

أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 178 بتاريخ 2016-08-25, 3:35 pm

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

لونك المفضل

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

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

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



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

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

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

قم بالبحث عن

الكود:

</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>

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

خلاص شكرا لك يغلق

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

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

هــــــام

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

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