Random words

Question

How do I draw coordinates of word positions over an image using the slider Carousel bootstrap?

You could put adjectives to the image and they would come randomly at different positions on the screen, maybe with different effects as well: fade.

More details:

I’m using a popular image slider in the bootstrap called Carousel and I want to assign adjectives to an image that will appear at random points in this image, if possible with transition effect. If the photo is 800x400, the draw of the coordinates of the point where the words should appear cannot exceed the maximum resolution of the image

Follows the code:

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

Answer 1

I made a simple example in the fiddle, has things to improve but can already have an idea of how it can be done: 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>