javascript - 任何显示 ajax 内容 slider 的教程？

Question

我找到了一个完全符合我希望 slider 外观的教程，但我不希望每张幻灯片中有多个幻灯片。我只是希望文本在我单击不同的链接时发生变化。

我还希望幻灯片通过淡入进行过渡。

我试着玩弄代码，但它似乎太复杂了，我无法理解。因为它似乎对每个 Action 都使用 Movefromleft movefromright ..。

我需要一些帮助来解决这个问题，或者指导我使用一个不那么复杂的漂亮界面(如本教程)的教程来做同样的事情。

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;
 }

我不确定为什么以及如何让 fiddle 显示它现在正在做什么。但基本上它不会显示第一张幻灯片，然后在第二张和第三张幻灯片上显示，但在第一次点击后它不起作用..

这里是原教程

http://tympanus.net/Tutorials/ItemSlider/

Answer 1

所以我能够找到另一个内容 slider 来完成我想要的，但我必须让它与其他教程一起使用。

HERE is what I came up with不幸的是，codepen 没有显示它是如何工作的。

但不管怎样，对于想要实现同样目标的人来说这是我使用的两个教程， Item slider & Full Width Tabs

我基本上围绕全宽选项卡的 CSS 工作，使它的界面非常像元素 slider

    .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;
    }