Jump to content
Marxrj

Fazer imagens aleatórias em DIV

Recommended Posts

Galera, tenho um carrossel no meu arquivo, porém queria que elas mudassem aleatóriamente a cada refresh na página, pois ela s´fica pela ordem normal.

      <div>
        <div>
          <div class="loop owl-carousel owl-theme">
            <div>
              <img src="imagens/jpeg.01">
            </div>
			
            <div>
              <img src="imagens/jpeg.02">
            </div>
			
            <div>
              <img src="imagens/jpeg.03">
            </div>
			
            <div>
              <img src="imagens/jpeg.01">
            </div>
			
            <div>
             <img src="imagens/jpeg.05"> 
            </div>
			
            <div>
              <img src="imagens/jpeg.07"> 
            </div>
			
			<div>
              <img src="imagens/jpeg.07">
            </div>
          </div>

 

Share this post


Link to post
Share on other sites

Esse exemplo que mostrei já está em um carrossel, mas não fica aleatório. Precisava de um exemplo.

Share this post


Link to post
Share on other sites

Tenta trocar o seu script por isso:

 

jQuery(document).ready(function($) {
  buildShuffleFeature();

  $(".owl-carousel .item").shuffle();

  $('.owl-carousel').owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 2,
    autoplay: true,
    autoplayTimeout: 5000,
    responsive: {
      550: {
        items: 9
      }
    }
  });


  function buildShuffleFeature() {
    (function($){
      $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
              return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
              var random = getRandom(allElems.length),
                  randEl = $(allElems[random]).clone(true)[0];
              allElems.splice(random, 1);
              return randEl;
            });

        this.each(function(i){
          $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);
      };
    })(jQuery);
  }
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Fernando Rafael
      Estou tendo problemas com a leitura de porta serial com PHP, consigo facilmente escrever na mesma, mas sempre que no comando de abertura da porta eu coloco que haverá permissão de leitura o PHP trava e fica carregando infinitamente, e a porta fica bloqueada e só libera quando reiniciado o computador.
       
      Segue o cod:
      exec('MODE COM1:9600,n,8,1'); //seta configuração na porta COM $fp=fopen("COM1","r+b"); if(!$fp) {     echo("Erro ao abrir a porta com1");     exit; } else {         echo("COM1 aberta <br>"); } fwrite($fp,Chr(5));  //escrevendo valor na porta sleep(1); //pausa para retorno dos dados echo (fgets($fp)); fclose($fp); já tentei  colocar:
      fopen("COM1", "r+b");
      fopen("COM1", "r+t");
      fopen("COM1", "r");
      fopen("COM1", "w+");
      fopen("COM1", "r+");
       
      para escrever consigo normal, com o fopen("COM1", "w");.  mas já para ler.....
       
      Notei que na internet tem muito sobre esse problema, inclusive falaram em permissões de usuário, sendo que nos casos em que conseguiram, estavam usando o Linux.
      Eu estou usando o W7 e W10 com PHP 5.2, se for o caso de permissões, como resolvo isso? preciso configurar mais alguma coisa no php.ini?
       
      Também já tentei usar uma classe: phpSerial
       
      Mas retorna o seguinte erro:
      Warning: Reading serial port is not implemented for Windows in C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs\balanca\php_serial.class.php on line 503
       
       
    • By rogerblower
      Pessoal tenho a seguinte tabela
      id | id_etapa | id_evento | posicao | nome | pontos
      1  |  1             |        2         |   1           | joao      |  10
      2  |  1             |        2         |   2           | pedro    |  9
      3  |  1             |        2         |   3           | maria    |  8
      4  |  1             |       2          |   4           | jose       |  7
      5  |  2             |      2          |   3           | joao       |  8
      6  |  2             |  2              |   1           | pedro    | 10
      7  |  2             |   2             |  2            | maria    |  9
      8  |  2             |  2              |   4          | jose        |  7
       
      O resultado da consulta pretendido é este
      Pos  |  nome |   pontos
      1      |  pedro   | 19
      2      |   joao   | 18
      3      |  maria  |  17
      4      |  jose  |  14
       
      Com esta consulta não ordenando a coluna posicao como esperado, ela repete a posicao e não faz a soma, ex:
       1     joao     10
       1     pedro     10
      $pontuacaoa = $pdo->prepare("SELECT * FROM contador WHERE id_evento = '$id_evento' GROUP BY nome, posicao ORDER BY pontos DESC posicao ASC"); Com esta outra consulta a soma esta correta o agrupamento nome esta correto, não se repetem, mas a coluna posicao fica fora de ordem;
       
      $pontuacaoa = $pdo->prepare("SELECT * FROM contador WHERE id_evento = '$id_evento' GROUP BY nome ORDER BY pontos DESC posicao ASC"); Não estou conseguindo acertar a consulta, alguém me ajuda?
    • By rjlfurtado
      Segue abaixo o exemplo de como seria feito em SQL:
      CREATE TABLE tabela ( campo1 DOUBLE, campo2 DOUBLE, divisao DOUBLE AS (campo1/campo2) ); Agora eu preciso criar uma migração no Laravel 6, segue exemplo abaixo:
      $table->integer('qtd_saida'); $table->decimal('valor_uni', 8, 2); $table->double('valor_total')->as(qtd_saida * valor_uni);  
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.