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

قم بالبحث عن

الكود: </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>

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