有任何教程显示ajax内容滑块吗？
有任何教程显示ajax内容滑块吗？
提问于 2014-08-26 23:29:54
我找到了一个教程，这正是我希望滑块看起来的方式，但我不希望每张幻灯片有多个幻灯片。我只想改变文本，因为我点击不同的链接。
另外，我希望幻灯片通过渐入佳境来过渡。
我试着玩代码，但它似乎太复杂，我的理解无法修复。因为它似乎用的是从左移动到右移动。每一个动作。
我需要一些帮助，要么修复这个问题，要么引导我使用一个不那么复杂的界面(像这个)教程来做同样的事情。
http://jsfiddle.net/itsnamitashetty/73pffnx9/2/
.mi-slider ul.mi-moveFromRight li {
-webkit-animation: moveFromRight 350ms ease-in-out both;
animation: moveFromRight 350ms ease-in-out both;
visibility:visible !important;
}我不知道为什么，也不知道如何让小提琴显示它现在在做什么。但是基本上它不会出现第一张幻灯片，然后第二张和第三张都能用，但是在第一次点击之后，它就不起作用了。
这里是最初的教程
http://tympanus.net/Tutorials/ItemSlider/
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-28 20:24:18
因此，我能够找到另一个内容滑块，它做了我想要的，但我必须让它与另一个教程。
不幸的是，这是我想出来的没有展示它是如何工作的。
但是不管怎么说，对于那些想要实现同样的目标的人来说，这里是我使用的两个教程，项目滑块 & 全宽度表
我基本上是围绕着CSS的全宽度标签，使它的界面很像项目滑块。
.container {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {text-decoration: none;
outline: none;}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{width:60%; margin:2% 20%;}
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
border-top: 5px solid transparent;
}
.tabs nav a.tab-current {
/* border: 1px solid #47a3da;
box-shadow: inset 0 2px #47a3da;*/
border-bottom: none;
z-index: 100;
}
.tabs nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.tabs nav a:hover, .tabs nav a.tab-current {
color: #000;
}
.content{background:rgba(0,0,0,0.8)}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
nav a.tab-current:after,
nav a.tab-current:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
nav a.tab-current:after {
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
border-width: 20px;
left: 50%;
margin-left: -20px;
}
nav a.tab-current:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25516743
复制相关文章
相似问题
腾讯云开发者
