Question

我找到了一个教程，这正是我希望滑块看起来的方式，除了我不希望每张幻灯片中有多个幻灯片。我只是想在单击不同链接时更改文本。

此外，我希望幻灯片通过淡入过渡。

我尝试过使用代码，但似乎太复杂了，无法修复我的理解。因为似乎每次运动都使用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;
 }

我不知道为什么以及如何让小提琴显示它现在正在做什么。但基本上它没有显示第一张幻灯片，然后适用于第二张和第三张，但在第一次点击后它不起作用..

这是原始教程

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

Answer 1

所以我能够找到另一个内容滑块，它可以完成我想要的工作，但我必须让它与其他教程一起工作。

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

但是对于想要达到同样目标的人来说无论如何这是我用过的两个教程， Item slider＆amp; Full Width Tabs

我基本上使用了Full Width Tabs的CSS，使其界面非常类似于Item滑块

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

任何显示ajax内容滑块的教程？

1 个答案: