#if($SliderList.Count > 0)
    <div class="$ThemeName" id="TB_Wrapper${ModuleID}" style="max-width: ${xf.ViewXmlSetting("max-width",700)}px; height: ${xf.ViewXmlSetting("height",300)}px;">
        <div class="Slides">
                 #foreach($SliderItem in $SliderList)
                   <div class="Slide" 
                        data-position="${xf.ViewSliderSetting($SliderItem,"data-position","150,250")}" 
                        data-width="${xf.ViewSliderSetting($SliderItem,"data-width",300)}" 
                        data-height="${xf.ViewSliderSetting($SliderItem,"data-height",100)}"
                        data-caption_bg_color="${xf.ViewSliderSetting($SliderItem,"data-caption_bg_color","#000000")}" 
                        data-caption_bg_opacity="${xf.ViewSliderSetting($SliderItem,"data-caption_bg_opacity","0.5")}"
                        data-caption_bg_shadow = "${xf.ViewSliderSetting($SliderItem,"data-caption_bg_shadow","0.5")}"
                        #if(${xf.ViewSliderSetting($SliderItem,"slide_enable","true")} == "true")
                            data-delay="${xf.ViewSliderSetting($SliderItem,"slide_delaytime",5)}"
                        #end
                   >
                  	#if(${xf.PictureUrl($SliderItem,"PictureLink","")} != "" && ${xf.PictureUrl($SliderItem,"PictureLink","")} != "http://" )
                        <a href="${xf.PictureUrl($SliderItem,"PictureLink","http://")}" target="${xf.ViewSliderSetting($SliderItem,"PictureLinkTarget","_blank")}">
                        	<img src="${xf.PictureUrl($SliderItem,"Picture","")}" alt="${xf.ViewSliderSetting($SliderItem,"Title","")}" />
                        </a>
                    #else 
                    	 <img src="${xf.PictureUrl($SliderItem,"Picture","")}" alt="#if(${xf.ViewSliderSetting($SliderItem,"imagealt","")}=="")${xf.ViewSliderSetting($SliderItem,"Title","")}#else${xf.ViewSliderSetting($SliderItem,"imagealt","")}#end" />	                	 
                    #end 
                    
                    #if(${xf.ViewSliderSetting($SliderItem,"DisplayTitle","true")}	== "true" || ${xf.ViewSliderSetting($SliderItem,"Description","")} != "") 
                    <div>
                    #if(${xf.PictureUrl($SliderItem,"PictureLink","")} != "" && ${xf.PictureUrl($SliderItem,"PictureLink","")} != "http://" )
                        <h3><a href="${xf.PictureUrl($SliderItem,"PictureLink","http://")}" target="${xf.ViewSliderSetting($SliderItem,"PictureLinkTarget","_blank")}">${xf.ViewSliderSetting($SliderItem,"Title","")}</a></h3>
                    #else 
                        #if(${xf.ViewSliderSetting($SliderItem,"Title","")}!="" && ${xf.ViewSliderSetting($SliderItem,"DisplayTitle","true")}	== "true")<h3>${xf.ViewSliderSetting($SliderItem,"Title","")}</h3> #end
                     #end 
                     #if(${xf.ViewSliderSetting($SliderItem,"Description","")}!="") 
                         ${xf.ViewSliderSetting($SliderItem,"Description","")}
                      #end
                    </div>
                     #end
                  </div>
                #end
        </div><!--End of Slides -->
    </div><!--End of TB_Wrapper -->
     
    <script type="text/javascript"> 
        jQuery(document).ready(function ($) {
            $('#TB_Wrapper${ModuleID}').TransBanner({
                responsive_screen_based_limits : true ,
                slide_autoplay: ${xf.ViewXmlSetting("slide_autoplay","true")}, 
                slide_delaytime: ${xf.ViewXmlSetting("slide_delaytime",5)}, 
                slide_transition: ${xf.ViewXmlSetting("slide_transition",1)},
                slide_transition_period: ${xf.ViewXmlSetting("slide_period",800)},
                slide_preload_images: ${xf.ViewXmlSetting("slide_images",1)},
                slide_random_order: ${xf.ViewXmlSetting("slide_random_order","false")},
    
                button_show_next: ${xf.ViewXmlSetting("button_next","true")},
                button_show_back: ${xf.ViewXmlSetting("button_back","true")},
                button_show_timer: ${xf.ViewXmlSetting("button_timer","true")},
                button_show_numbers: ${xf.ViewXmlSetting("button_numbers","true")},
                button_numbers_autohide: ${xf.ViewXmlSetting("button_autohide","true")},
                button_numbers_horizontal: ${xf.ViewXmlSetting("button_horizontal","false")},
        
                navigation_type: ${xf.ViewXmlSetting("navigation_type",1)},
                caption_float_mode: ${xf.ViewXmlSetting("caption_float_mode","true")}
                
            });
            
        });	
    </script>
#end