Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Inserir dados em um slider

Pessoal, em outro projeto eu estou usando um slider e gostaria de inserir as imagens nesse slider e fazer dessas imagens links para o conteúdo mas queria também que ao clicar o corpo da notícia aparecesse na mesma página abaixo do slider. Como poderia fazer isso?

7 respostas
solução!

Fala aí Edilson, tudo bem? Isso pode ser feito de N maneiras, vou te falar a maneira que pensei em fazer no momento.

Crie uma estrutura em seu HTML que permita esse tipo de necessidade, algo mais ou menos assim:

<div class="slide">
    <img alt="DESCRICAO" src="LINK" data-content="1">
</div>
<div class="slide-conteudo>
    <div class="noticia" data-control="1">...</div>
</div>

Ai quando for clicado na imagem você pega o valor de data-content e busca o data-control dele:

const conteudo = document.querySelector('[data-control="1"')

Caso encontre o control você pode estar adicionando ou removendo uma classe dele para mostrar/esconder:

conteudo.classList.add('visivel')

Espero ter ajudado.

No img essa propriedade data-content é necessária? Pois a inserção da imagem será com o php, não terei como usar essa tag.

Ela é necessário para saber qual noticia ela corresponde, você pode tentar outras maneiras, só precisa linkar a noticia com a imagem.

Espero ter ajudado.

Matheus, desculpa a demora em te responder. Eu estou o loop do wordpress para fazer isso e acho que precisaria fazer um for para usar a sua solução. O meu código tá assim.

<div class="swiper-container">
            <div class="swiper-wrapper">
                    <?php
                        $tipoPost = new WP_Query(array(
                            'posts-per-page' => 1,
                            'post_type' => 'noticia'
                        ));
                        if($tipoPost->have_posts()) {?>

                            <?php
                            while($tipoPost->have_posts()) {
                                    $tipoPost->the_post();
                                echo '<div class="swiper-slide">';
                                the_post_thumbnail();
                                the_title('<h3 class="titulo-noticia">', '</h3>');
                                echo '</div>';
                            ?>
                        <?php
                            }
                        ?>
                <?php
                    }
                ?>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


<?php
            if($tipoPost->have_posts()) {
                while($tipoPost->have_posts()) {
                    $tipoPost->the_post();
                    echo '<section class="corpo-noticia">';
                    the_content();
                    echo '</section>';
                }
                wp_reset_postdata();
            }
        ?>

Fala ai Edilson, o que você pode fazer é tornar adicionar um a dentro do seu h3 com o link para onde precisa mandar o usuário.

Algo assim:

<h3>
    <a href="LINK">TITULO</a>
</h3>

Espero ter ajudado.

Eu consegui Matheus, obrigado pela ajuda. Eu consegui pensar numa forma de usar a primeira solução que você sugeriu.

Perfeito Edilson, fico feliz que tenha conseguido resolver.

Não deixe de marcar o tópico como solucionado, assim conseguimos ajudar outros alunos com problemas iguais ou parecidos.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software