Text slide

Asked

Viewed 1,127 times

0

ola would like to know how I do this effect here slide text :

http://demo.megadrupal.com/d7/md-bigstream/index-6

he is almost at the end of the page the title and People SAY if it is possible to help me I am not able to do and I found nothing on the internet only slides with images and this time I want only my text moves like that site

javascript html5 css3
  • 1

    What did you try? What was the problem found? Add in question the code you have developed so far, error messages, etc.

  • @Viníciusgobboa.deOliveira I tried to research something else I do not find anything of respect only slides with images and in this case the background is always the same and what is changing is the text and I do not even know how to search

2 answers

1

    $(function(){
      /* Aqui ficam as configurações padrões do slide */
      $('#slider-id').codaSlider();
      /* Se você quiser mudar alguma configuração, pode mudar aqui:
          $('#slider-id').codaSlider({
            autoSlide:true,
            autoHeight:false
          });
      
      */
    });
<!-- Adicione tudo que tá aqui entre o <head></head> no antes de </body> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://kevinbatdorf.github.io/codaslider/css/style.css" rel="stylesheet"/>
<script src="http://kevinbatdorf.github.io/codaslider/js/jquery.coda-slider-3.0.js"></script>
<script src="http://kevinbatdorf.github.io/codaslider/js/jquery.easing.1.3.js"></script>

<!-- Aqui fica o conteúdo do slide, você pode adicionar quantos quiser, 1,2, N conteúdos -->
<!-- A parte abaixo deve ser colocada depois da <body> -->
    <div class="coda-slider"  id="slider-id">
      <div>
        <h2 class="title">Panel 1</h2>
        <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
      </div>
      <div>
        <h2 class="title">Panel 2</h2>
        <p>PLorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
      </div>
      <div>
        <h2 class="title">Panel 3</h2>
        <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
      </div>
      <div>
        <h2 class="title">Panel 4</h2>
        <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
      </div>
    </div>

Source

0

I usually use this slide. Responsive and with plenty of features.

http://bxslider.com/

$(document).ready(function(){
  $('.bxslider').bxSlider();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet"/>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
  <li>Imagem1<img src="https://imgnzn-a.akamaized.net/2015/10/29/29102855140225.jpg" /></li>
  <li>Imagem2<img src="https://imgnzn-a.akamaized.net/2015/10/29/29102855140225.jpg" /></li>
  <li>Imagem3<img src="https://imgnzn-a.akamaized.net/2015/10/29/29102855140225.jpg" /></li>
</ul>

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.