我想知道如何在幻灯片面板中动态加载内容

Question

有没有办法将内容动态加载到幻灯片面板中？

例如，我想在滑动面板切换和向下滚动时加载新闻内容，内容应该动态加载。

滑动面板的一个示例如下：http://jsfiddle.net/xpp5sgg8/2/。所以当面板切换时，应显示内容。

HTML：

<div class="sidebar"> 
    <div class="toggle"></div> 
</div> 

的jQuery：

$('.toggle').on('click', function() { 
    $('.sidebar').toggleClass("sidebar-collapsed"); 
}); 

CSS：

.sidebar, .toggle { 
    transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out; 
} 

.sidebar { 
    background:lightgrey; 
    width:200px; 
    height:100vh; 
    position:absolute; 
    top:0; 
    left:0; 
} 

.toggle { 
    position:absolute; 
    right:5px; 
    top:5px; 
    width:30px; 
    height:30px; 
    background:black; 
} 

.sidebar-collapsed { 
    transform:translateX(-100%); 
    -webkit-transform:translateX(-100%); 
} 

.sidebar-collapsed .toggle { 
    right:-5px; 
    transform:translateX(100%); 
    -webkit-transform:translateX(100%); 
} 

Answer 1

这里是你的代码的小例子。它预装IMG并追加到您的.sidebar

http://jsfiddle.net/xpp5sgg8/171/

如果您正在使用jQuery的，看看jQuery.ajax文档。