Random words

Question

Random words

Navigation

#1 by (0 votes)

3

How do I sort coordinates of word positions over an image using Bootstrap's slider carousel ?

You could put adjectives in the picture and they come randomly in different positions on the screen, maybe with different effects too: 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 transitive effect. If the photo has 800x400, the draw coordinates of the point where the words should appear can not exceed the maximum resolution of the image

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

twitter-bootstrap carousel

asked by anonymous 12.11.2015 / 02:10

1 answer

ShareStatusTask identify my app on Facebook? How to implement certificate chains? what is the importance / function?

score 0 · Answer 1

I made a simple example in the fiddle, there are things to improve but I can already get an idea of how it can be done: link

$('#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><scriptsrc="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"/><pclass="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"/><pclass="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>