Slider (Carousel) Bootstrap, How to Change Nesting

Asked

Viewed 888 times

0

I’m starting now to mess with both site and bootstrap, I’m using wordpress tbm. Ok my doubt is the following, I wonder if it is possible to change the transition pattern animation that comes with the standard bootstrap menu and add another animation during transitions from 1 slider to the other.

Analyzing the HTML I believe that the part that takes care of the animation is this part of the code.

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

data-slide="Prev"

pq viewing a slider with animations from other sites, see that instead of "Data-Slide" ta "Data-Animation" or something like that.

So... you have to take care of this animation only by HTML, or I’ll have to use css elements or even java-script.

Thanks in advance.

Bootstrap website slide code

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  • I can, but your code in the editor is incomplete and you can’t quite figure out how to change the animation. You can put an ID on each slide and modify them with javascript: var x = Document.getElementById('demo1'). innerHTML = "Teste1" var y = Document.getElementById('demo2'). innerHTML = "Teste2" var z = Document.getElementById('demo3'). innerHTML = "Teste3" Document.getElementById('demo1'). innerHTML = x Document.getElementById('demo2'). innerHTML = y Document.getElementById('demo3'). innerHTML = z

  • hm... I have not used javascript yet on my site, so this addition will only be made through javascript ? PS: is incomplete pq n has the bootstrap files, I will try to add

  • I believe so, it is the most suitable. But it will be a simple thing to do with javascript.

  • I can’t find where to edit the post, to add the xD css, thanks anyway I’ll go to see more about using javascript then THANK YOU!!!

No answers

Browser other questions tagged

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