Sistema de Depoimentos na Home da Loja

Bom dia pessoal!

Alguém sabe como alterar esse código para mostrar 3 depoimentos no desktop e 1 no mobile?

Ele mostra apenas um em ambos porém que no desktop fica muito espaço sobrando.

Quero deixar ele assim

Segue abaixo o código.

<!--
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>
3 curtidas

a ideia seria essa… good luck!



$(window).resize(function(){
	var gridSize = (window.innerWidth < 600) ? 1 :
				   (window.innerWidth < 900) ? 3 : 4;
	if (gridSize != $(".flexslider").flexslider().data('flexslider').vars.maxItems){
		$("#depoimentos .flexslider").flexslider().data('flexslider').vars.maxItems = gridSize;
		$("#depoimentos .flexslider").flexslider().data('flexslider').vars.minItems = gridSize;
		$("#depoimentos .flexslider").flexslider().data('flexslider').setup("init");
	}
});
1 curtida

Ah sim, Muito Obrigado!

Além do outro código no HTML coloco esse junto ou no CSS ?

esse é so para mudar o flex de tamanho conforme a resolução.

1 curtida

Mas ele é HTMl JavaScrip ou CSS testei e não deu.

esse flex seu ta meio zuada…

Quando eu uso o seu texto “Anitta, Neymar e Cristiano” os depoimentos aparecem, porém quando edito os nomes para os meus clientes os depoimentos não aparecem.
Sabe o que pode ser?

coloquei o codigo do colega acima, no desktop aparece perfeitamente, porem quando vejo no mobile, os Depoimentos nao estao centralizados, ai não da pra ler, pode me ajudar? tentei jogar esse flex no html, css e junto com o codigo do colega, mas nao mudou nada

este CSS está quebrando o layout.

se corrigido, funciona.

consegui leo, muito obg

Oiii! Boa Tarde! @Leonardo_Vicentini_F como insiro as estrelas?

possivelmente via html ou algum plugin

Consegui usar o código e criar o campo com os depoimentos, mas faltou as estrelas pra ficar perfeito…rsrs
Você conseguiria me ajudar com código?

1 curtida

entendi, mas vai precisar de criar os html para isso, e realmente eu não tenho nada pronto.

Tente assim:

<div id="depoimentos">
    <div class="conteiner">
        <div class="row-fluid">
            <h4>Depoimentos dos nossos Clientes</h4>
            <div class="span8 offset2">
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <img class="avatar" src="https://i.ibb.co/WtmtMCY/Biahenriques66.jpg">
                            <blockquote class="text-center">
                                <p>Adoro os produtos de vocês!</p>
                                <cite>Usuário 1, <a target="_blank" href="https://instagram.com/">@usuario1</a></cite><br></br>
                                <font size="+3" color="#DAA520">★★★★</font>
                            </blockquote>
                        </li>
                        <li>
                            <img class="avatar" src="https://i.ibb.co/WtmtMCY/Biahenriques66.jpg">
                            <blockquote class="text-center">
                                <p>A-do-ro!</p>
                                <cite>Usuário 2, <a target="_blank" href="https://instagram.com/">@usuario2</a></cite><br></br>
                                <font size="+3" color="#DAA520">★★★★</font>
                            </blockquote>
                        </li>
                        <li>
                            <img class="avatar" src="https://i.ibb.co/WtmtMCY/Biahenriques66.jpg">
                            <blockquote class="text-center">
                                <p>Sem palavras pra descrever como eu amo essa marca.</p>
                                <cite>Usuário 3, <a target="_blank" href="https://instagram.com/">@usuario3</a></cite><br></br>
                                <font size="+3" color="#DAA520">★★★★</font>
                            </blockquote>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#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';
    }
    #depoimentos > div:nth-child(1) > div:nth-child(1) > h4:nth-child(1){
text-align: center;
}
</style>
3 curtidas

Muito Obrigada @Mauricio_Pereira! Deu Certo! Apenas adicionei mais uma estrela pra ficar com 5 rsrs… Deus te abençoe! Vocês sempre nos salvando!

3 curtidas

As estrelas não apareceu mas coloquei com emojis mesmo kkk

https://www.grifestorevariedades.com.br

Esse só apareceu o nome Depoimentos dos nossos clientes abaixo do rodapé, acho que errei em algo kkk

Como centralizar no mobile ?

olhei sua loja agora na versão mobile e me parece que já está como queria correto?