Loja Integrada - depoimentos

depoimentos-loja-integrada-v2.html

<!--
1. Crie um novo código HTML (https://app.lojaintegrada.com.br/painel/configuracao/html/criar)
2. Descrição: Depoimentos
3. Local de publicação: Rodapé
4. Página: home
5. Tipo: HTML
6. Conteúdo: cole todo o código abaixo
7. Divirta-se
-->
<div id="depoimentos">
    <div class="conteiner">
        <div class="row-fluid">
            <h4>Depoimentos</h4>
            <div class="span8 offset2">
                <div class="flexslider">
                    <ul class="slides"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var depoimentos =
    [
        {
            "nome": "Cristiano Ronaldo",
            "avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/14733352_1693934057601947_5708220546672492544_a.jpg",
            "conteudo": "Adoro os produtos de vocês!",
            "instagram_handle": "cristiano"
        },
        {
            "nome": "Anitta",
            "avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/16110162_236405696802697_6722489378704195584_n.jpg",
            "conteudo": "A-do-ro!",
            "instagram_handle": "anitta"
        },
        {
            "nome": "Neymar Jr",
            "avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/16464919_657546871036654_5563932799695585280_a.jpg",
            "conteudo": "Sem palavras pra descrever como eu amo essa marca.",
            "instagram_handle": "neymarjr"
        }
    ];
    
    var slides = $('#depoimentos ul.slides');

    $.each(depoimentos, function(i, item) {
        var depoimento = depoimentos[i];
        var li = $('<li/>').appendTo(slides);
        var img = $('<img/>').addClass('avatar').attr('src', depoimento.avatar).appendTo(li);
        var blockquote = $('<blockquote/>').addClass('text-center').appendTo(li);
        var p = $('<p/>').text(depoimento.conteudo).appendTo(blockquote);
        var cite = $('<cite/>').text(depoimento.nome + ", ").appendTo(blockquote);
        var a = $('<a/>').
        attr("target", "_blank").
        attr("href", "https://instagram.com/" + depoimento.instagram_handle).
        text("@" + depoimento.instagram_handle).appendTo(cite);
    });
    
    $('#depoimentos').appendTo('#corpo .secao-secundaria');
    $('#depoimentos .flexslider').flexslider({
        randomize: true
    });
</script>
<style>
    #depoimentos .conteiner {
        padding: 0;
        background: transparent;
        box-shadow: none;
        max-width: 1180px;
        margin: 50px auto 15px;
    }
    
    #depoimentos .flexslider {
        margin-top: 40px;
    }
    
    #depoimentos .avatar {
        width: 100px;
        overflow: hidden;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    
    #depoimentos blockquote {
        border-left: none;
    }
    
    #depoimentos blockquote p {
        margin-bottom: 20px;
    }
    
    #depoimentos blockquote cite::before {
        content: '\2014 \0020';
    }
</style>