Как создать динамический слайдер во внешнем интерфейсе, основанный на ответе API ajax, используя jquery?

Question

Я хотел бы для создания динамического слайдера. Я получаю ответ Api. Во внешнем интерфейсе. Мы используем Jquery ajax для получения ответа API. Ниже приведен ответ Api: "{" success ":" 1 "," data ":[{ "ID": 1, "название": "баннер-1", "URL": "7", "образ": "ресурсы / активы / изображения / banner_images / 1504099866.banner_1.jpg", "тип":"категория"}, { "ID": 2, "название": "Знамя-2", "URL": "12", "образ": "ресурсы / активы / изображения / banner_images / 1502370343.banner_2.jpg","Тип": "категория"}, { "ID": 3, "название": "Знамя-3", "URL": "23", "образ": "ресурсы / активы / изображения / banner_images / 1502370366.banner_3.jpg " "тип": "категория"}, { "ID": 4, "название": "Баннер-4", "URL": "17", "образ":" ресурсы / активы / изображения / banner_images/1502370387.banner_4.jpg","type":"category"},{"id":5,"title":"Banner-5","url":"19","image":"resources/assets/images/banner_images/1502370406.banner_5.jpg","type":"category" угр.ключэту"id":6,"title":"banner demo1 "," url ":" "," image ":" resources/assets/images/banner_images/1537167046.Lighthouse - Copy - Copy (2) .jpg "," type ":" deal "}]," message ":" Баннерывозвращено успешно. "}"

Нажмите здесь, чтобы показать вывод

			
		 
	$(document).ready(function(){	
		var sliders=$('#slider_j');  
		  
		var d = new Date();
    var consumer_nonce = d.getTime();
		
		U=url+'api/get_banners';
		//alert(consumer_nonce);
		//exit;
		//var ul="{{ url('/backend/api/save_reg') }}";
	
		  $.ajax({
        type:"POST",
        url:url+'api/get_banners',
      // data:$("#postcontent").serialize(),
	/*	data:{
			    customers_firstname:customers_firstname,
			    customers_lastname:customers_lastname,
				 customers_telephone:customers_telephone,
			   email:email,
			   password:password
			   },*/
			    headers: {
        
        "consumer-key": consumer_key, 
		"consumer-secret": consumer_secret, 
		"consumer-nonce": consumer_nonce, 
		"consumer-device-id": consumer_device_id,  
    },
success:function(sliders){ 
		
		
		/*$.each(sliders,function(i,slider){
				$sliders.append(<div>jjjjjjkk</div>);
				
				});*/

	  alert(sliders);
    

		//-- alert(response[1]); 
            //alert(response);
			//response = response.toJSON();
			//alert(response);
          //  $("#return_update_msg").html(response); 
           // $(".post_submitting").fadeOut(1000);                
        }
    });
	  
    
	});		
			
		
	

<div class="slider-brands col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="yt-content-slider contentslider" data-autoplay="no" data-delay="4" data-speed="0.6" data-margin="0" data-items_column0="8" data-items_column1="6" data-items_column2="3" data-items_column3="2" data-items_column4="1" data-arrows="yes"
                        data-pagination="no" data-lazyload="yes" data-loop="no">
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b1.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b2.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b3.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b4.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b5.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b6.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b4.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b5.png" alt="brand">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="{{ asset('public/frontend/qshopee')}}/image/catalog/brands/b6.png" alt="brand">
                        </a>
                    </div>
                </div>
            </div>