3

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>
0

1 Resposta 1

0

Fiz um exemplo simples no fiddle, tem coisas para melhorar mas já da p ter um ideia de como pode ser feito: https://jsfiddle.net/henriquedpereira/9c6t3h9d/

$('#meuCarousel').bind('slid', function(e) {
  var image = $("#meuCarousel .active .imgCarousel");
  var container = $("#meuCarousel .active .containerCarousel");

  var divText = $("#meuCarousel .active .textCarousel");
  divText.hide();

  //Pega o valor do texto, junta em uma array e pega um valor aleatorio
  var arrayText = divText.html().split(",").map(String);
  var text = arrayText[Math.floor(Math.random() * arrayText.length)];
  divText.html(text);

  //Pega o tamanho da imagem e depois um numero aletorio para aparecer o texto
  var textPositionWidth = Math.floor(Math.random() * $("#meuCarousel .item").width()) + 1;
  var textPositioHeight = Math.floor(Math.random() * $("#meuCarousel .item").height()) + 1;

  divText.show().animate({
    left: textPositionWidth,
    top: textPositioHeight
  }, 500);
});
$('#meuCarousel').trigger('slid');
.item {
  height: 400px;
}
.textCarousel {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />


<div id="meuCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#meuCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#meuCarousel" data-slide-to="1" class=""></li>
    <li data-target="#meuCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <div class="containerCarousel">
        <img class="imgCarousel" src="http://www.noao.edu/image_gallery/images/d4/m81y.jpg" />
        <p class="textCarousel">Test12e!,Te333ste!,Te555ste!,T666este!</p>
      </div>
    </div>
    <div class="item">
      <div class="containerCarousel">
        <img class="imgCarousel" src="http://www.noao.edu/image_gallery/images/d4/m81y.jpg" />
        <p class="textCarousel">Teste2!</p>
      </div>
    </div>
  </div> <a class="left carousel-control" href="#meuCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#meuCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .