这显示Ajax内容滑盖任何教程？ [英] Any tutorials that show ajax content slider?

问题描述

我发现了一个教程，正是我想要的滑块来寻找与我不希望在每张幻灯片多张幻灯片异常的方式。我只是想在文本修改为我点击不同的链接。

I found a tutorial that is exactly the way I want the slider to look with the exception that I do not want to have multiple slides in each slide. And I simply want the text to change as I click different links.

此外，我希望该幻灯片过渡由衰落

Also I want the slides to transition by fading in.

我试着摆弄code，但它似乎是太复杂，我的理解来解决。因为它似乎使用Movefromleft movefromright ..每个动作。

I tried playing around with the code, but it seems to be way too complex for my understanding to fix. Because it seems to use Movefromleft movefromright .. for each movement.

我需要一些帮助，要么解决这个问题，或引导我到一个不太复杂的版本，一个漂亮的界面（像这样）的教程，做同样的。

I need some help to either fix this or guide me to a less complex version of a nice interface (like this) tutorial that does the same.

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

我不知道为什么，以及如何让小提琴展现了一下它现在做。但基本上它doesn;吨露面的第一张幻灯片，然后适用于第二和第三，但..

I am not sure why and how to get the fiddle to show up what its doing right now. But basically it doesn;t show up the first slide, and then works for the second and third but after the first clicks it doesnt work..

这里是原来的教程

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

推荐答案

所以，我能够发现做了什么，我想，但我不得不使其与其他教程，另一个内容滑块。

So I was able to find another content slider that did what I wanted but I had to make it work with the other tutorial.

这里是我想出了 不幸的是，codePEN中没有显示它是如何工作的。

HERE is what I came up with Unfortunately the codepen in not showing how it works.

但不管怎么说有人希望实现同样的事情 这里是我用了两个教程， 项目滑盖 ＆放大器; 全宽标签

But anyways for someone looking to achieve the same thing here are the two tutorials that I used, Item slider & Full Width Tabs

我基本上围绕工作全宽标签的CSS，使其界面pretty的很像项目滑盖

I basically worked around the CSS of Full Width Tabs to make it interface pretty much like Item 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;
    }

这篇关于这显示Ajax内容滑盖任何教程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！