Carregando...

Slideshow pronto

Postado: 30 de julho de 2023 Tempo de Leitura: 4 Minutos

Slideshow pronto

Neste artigo vamos criar um slideshow com html, css e jquery, vamos criar feitos em textos e imagens dinâmicos e responsivos.

Slideshow Pronto

O que é slideshow ?

Slideshow é uma sequencia imagens comum que mostra cada conteúdo através das setas e marcadores, contando com efeitos de transição nas figuras além da legenda na parte inferior de cada imagem.

O slider é um elemento visual muito comum em aplicações em páginas web, principalmente àquelas que exibem muitas imagens, possibilitando uma melhor experiência ao usuário.

Slideshow Pronto: Veja a seguir como criar apresentações envolventes com html css e jquery.

Criando slideshow visualmente atraentes e pronto para usar

A aparência dos seus slides desempenha um papel crucial na criação de apresentações cativantes.

Além disso os slides visualmente atraentes não apenas tornam sua apresentação mais agradável de se ver, mas também ajudam a transmitir sua mensagem de forma mais eficaz.

Veja algumas dicas abaixo de como criar um slideshow profissional!

1. Use um design limpo e profissional. Evite slides com muitos elementos distrativos e opte por um design minimalista que coloque o foco no conteúdo principal.

2. Use imagens de alta qualidade que sejam relevantes para o conteúdo da sua apresentação. Imagens interessantes e atraentes podem ajudar a transmitir suas ideias de forma mais impactante.

3. Utilize gráficos e infográficos para apresentar dados e estatísticas de forma visualmente atraente. Isso tornará suas informações mais compreensíveis e fáceis de digerir.

4. Utilize espaços em branco para destacar elementos importantes nos seus slides. Isso ajudará a direcionar a atenção do público para as informações essenciais.

5. Escolha uma paleta de cores harmoniosa e evite combinações que sejam muito contrastantes ou difíceis de ler. As cores devem complementar seu conteúdo e transmitir a mensagem certa.

6. Adicione botões de navegação para permitir que o público interaja com sua apresentação e acesse informações adicionais. Portanto podemos incluir links para página ou artigos relevantes, recursos adicionais ou páginas específicas dentro da apresentação.

7. Utilize transições suaves entre slides para criar uma experiência de visualização mais fluida e agradável. Transições excessivamente complexas ou exageradas podem distrair e prejudicar a clareza da sua mensagem.

8. Use animações para destacar elementos importantes ou para revelar informações gradualmente. Isso pode ajudar a manter a atenção do público e criar momentos de impacto.

9. Ajuste seu slideshow para desktop e dispositivos móveis, a grande parte do seu publico de estar acessando sei site pelo celular cuide bem do Responsivo. Deixe 100% ajustável a qualquer tamanho de tela.

Vamos adicionar o Html

    <!-- slider Inicio -->
    <section class="slider">
                
                <div class="rev_slider_wrapper fullwidthbanner-container rs1-revo">
                    <div id="rev_slider_1" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none">
                        
                        <ul>
                            
                            <!-- Slide 1 -->
                            <li data-transition="fade">
                               
                                <img src="uploads/slider-1-desktop.jpg" id="slide1" alt="IMG-SLIDE" class="rev-slidebg">

                                <h2 class="tp-caption tp-resizeme title-slide"
                                    data-frames='[{"delay":500,"speed":1500,"frame":"0","from":"x:left;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['1200','992','768','480']"
                                    data-hoffset="['0','20','20','20']" 
                                    data-voffset="['-160','-160','-160','-160']"
                                    data-fontsize="['42', '30', '30', '30']" 
                                    data-lineheight="['50', '50', '50', '50']"
                                    data-height="['auto']">Códigos Html Prontos!
                                </h2>

                                <p class="tp-caption tp-resizeme subtitle-slide"
                                    data-frames='[{"delay":1500,"speed":1500,"frame":"0","from":"x:right;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['400','400','400','400']"
                                    data-hoffset="['0','50','50','26']" 
                                    data-voffset="['-80','-80','-80','-80']"
                                    data-fontsize="['30', '35', '25', '25']" 
                                    data-lineheight="['40', '40', '40', '30']"
                                    data-height="['auto']">Aprenda desenvolvimento<br> web do jeito certo.
                                </p>

                                <div class="tp-caption tp-resizeme btn-slide"
                                     data-frames='[{"delay":3000,"speed":1500,"frame":"0","from":"y:bottom;rX:-20deg;rY:-20deg;rZ:0deg;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                     data-x="left" 
                                     data-y="center" 
                                     data-hoffset="['0','26','26','26']" 
                                     data-voffset="['15','15','15','15']"
                                     data-fontsize="['22', '22', '22', '22']" 
                                     data-lineheight="['40', '40', '40', '30']"
                                     data-height="['auto']">
                        
                                        <a href="https://www.loopnerd.com.br/codigos-html-prontos/" title="Saiba mais">Saiba mais</a>

                                </div>

                            </li>
                            <!-- Slide 1 -->

                            <!-- Slide 2 -->
                            <li data-transition="fade">
                               
                                <img src="uploads/slider-2-desktop.jpg" id="slide2" alt="IMG-SLIDE" class="rev-slidebg">

                                <h2 class="tp-caption tp-resizeme title-slide"
                                    data-frames='[{"delay":500,"speed":1500,"frame":"0","from":"x:left;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['1200','992','768','480']"
                                    data-hoffset="['0','20','20','20']" 
                                    data-voffset="['-160','-160','-160','-160']"
                                    data-fontsize="['42', '30', '30', '30']" 
                                    data-lineheight="['50', '50', '50', '50']"
                                    data-height="['auto']">Códigos Css Prontos!
                                </h2>

                                <p class="tp-caption tp-resizeme subtitle-slide"
                                    data-frames='[{"delay":1500,"speed":1500,"frame":"0","from":"x:right;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['400','400','400','400']"
                                    data-hoffset="['0','50','50','26']" 
                                    data-voffset="['-80','-80','-80','-80']"
                                    data-fontsize="['30', '35', '25', '25']" 
                                    data-lineheight="['40', '40', '40', '30']"
                                    data-height="['auto']">códigos css prontos<br> para baixar editar.
                                </p>

                                <div class="tp-caption tp-resizeme btn-slide"
                                     data-frames='[{"delay":3000,"speed":1500,"frame":"0","from":"y:bottom;rX:-20deg;rY:-20deg;rZ:0deg;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                     data-x="left" 
                                     data-y="center" 
                                     data-hoffset="['0','26','26','26']" 
                                     data-voffset="['15','15','15','15']"
                                     data-fontsize="['22', '22', '22', '22']" 
                                     data-lineheight="['40', '40', '40', '30']"
                                     data-height="['auto']">
                        
                                        <a href="https://www.loopnerd.com.br/codigos-css-prontos/" title="Saiba mais">Saiba mais</a>

                                </div>

                            </li>
                            <!-- Slide 2 -->

                            <!-- Slide 3 -->
                            <li data-transition="fade">
                               
                                <img src="uploads/slider-3-desktop.jpg" id="slide3" alt="IMG-SLIDE" class="rev-slidebg">

                                <h2 class="tp-caption tp-resizeme title-slide"
                                    data-frames='[{"delay":500,"speed":1500,"frame":"0","from":"x:left;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['1200','992','768','480']"
                                    data-hoffset="['0','20','20','20']" 
                                    data-voffset="['-160','-160','-160','-160']"
                                    data-fontsize="['42', '30', '30', '30']" 
                                    data-lineheight="['50', '50', '50', '50']"
                                    data-height="['auto']">Jquery !
                                </h2>

                                <p class="tp-caption tp-resizeme subtitle-slide"
                                    data-frames='[{"delay":1500,"speed":1500,"frame":"0","from":"x:right;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                    data-x="left" 
                                    data-y="center" 
                                    data-width="['400','400','400','400']"
                                    data-hoffset="['0','50','50','26']" 
                                    data-voffset="['-80','-80','-80','-80']"
                                    data-fontsize="['30', '35', '25', '25']" 
                                    data-lineheight="['40', '40', '40', '30']"
                                    data-height="['auto']">Animações prontas com jquery<br> para usar no seu site.
                                </p>

                                <div class="tp-caption tp-resizeme btn-slide"
                                     data-frames='[{"delay":3000,"speed":1500,"frame":"0","from":"y:bottom;rX:-20deg;rY:-20deg;rZ:0deg;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                     data-x="left" 
                                     data-y="center" 
                                     data-hoffset="['0','26','26','26']" 
                                     data-voffset="['15','15','15','15']"
                                     data-fontsize="['22', '22', '22', '22']" 
                                     data-lineheight="['40', '40', '40', '30']"
                                     data-height="['auto']">
                        
                                        <a href="https://www.loopnerd.com.br/jquery/" title="Saiba mais">Saiba mais</a>

                                </div>

                            </li>
                            <!-- Slide 3 -->

                        </ul>

                    </div>
                </div>

    </section>
    <!-- Slider Fim -->

Css Separado na pasta Revolution

    <!--Css Slider Revolution-->
    <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
    <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
    <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
    <!--Css Slider Revolution-->

Jquery separado na pasta Revolution

OBSERVAÇÃO!

Vejam que eu adicionei mais um script com uma condição se o usuário acessar do celular ele pega uma imagem na versão MOBILE, ou si ele acessar do Computador ele pega a versão desktop.

Reparem que adicionei os id’s no para trocar as imagens no atributo (attr no img) que correspondem a cada slide: #slide1, slide2, #slide3

Com isso o slide fica 100%, tanto no MOBILE quanto no DESKTOP é só fazer as imagens para as duas versões e lembrando de redirecionar a url no endereço do seu site como esta ali abaixo no código.

<!--Script Slider Revolution-->
  
    <script src="revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="revolution/js/jquery.themepunch.revolution.min.js"></script>
    <script src="revolution/js/slide-custom.js"></script>
    <script>
      
        //se estiver no celular vai buscar imagens pequenas    
        if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/)) {

            $("#slide1").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-1-mobile.jpg");
            $("#slide2").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-2-mobile.jpg");
            $("#slide3").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-3-mobile.jpg");
        
        //se tiver no computador vai pegar imagens grandes
        }else{   
           
            $("#slide1").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-1-desktop.jpg");
            $("#slide2").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-2-desktop.jpg");
            $("#slide3").attr("src", "https://www.loopnerd.com.br/artigos/jquery/slideshow-pronto/uploads/slider-3-desktop.jpg");

        }

    </script>

<!--Script Slider Revolution-->

Slideshow pronto para baixar e editar!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

526 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados