Como eu faço para sortear coordenadas de posições de palavras sobre uma imagem utilizando o slider carousel do Bootstrap?
Poderia colocar adjetivos a imagem e elas virem aleatoriamente em posições diferentes na tela, talvez com efeitos diversos também: fade.
Mais detalhes:
Eu estou utilizando um slider de imagens popular no bootstrap chamado carousel e eu quero atribuir adjetivos a uma imagem que vao aparecer em pontos aleatorios desta imagem, se possivel com efeito de transicao. Se a foto tiver 800x400, o sorteio das coordenadas do ponto onde as palavras devem aparecer nao podem ultrapassar a resolucao maxima da imagem
Segue o código:
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>