Slide no index

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Bom, gostaria desse estilo de slide: http://prntscr.com/gmeb59
Cujo mostra uma foto (wallpaper) e em baixo eu posso escrever dando o título a ela e uma descrição pequena.
Ao passar o slide poderia ter um efeito parecido com o deste fórum que foi onde peguei a print acima: http://br.fenixzone.com/

Dá para fazer ?

Up.
Podemos tentar fazer o mesmo pelo anuncio do forum, mudando apenas efeito de passar o anuncio e também adicionar a barrinha para digitar algo sobre a imagem colocada.

Coloque isso antes do </head> no overall_header:

Código:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Isso no anúncio:

Código:

<div class="owl-carousel">
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
</div>

E isso num novo JavaScript:

Código:

$(function(){
  $(".owl-carousel").owlCarousel();
});

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Certo, mas e para adicionar as imagens? Não entendi muito bem.. O conteúdo serve para quê ? Poderia explicar melhor ?

Você coloca as imagens dentro das div's:

Kyo Panda escreveu:

Código:

<div class="owl-carousel">
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
</div>

Em "conteúdo", você pode colocar o que quiser e personalizar com HTML/CSS.

Não houve resultados.
Veja: http://prntscr.com/gnjxya
http://prntscr.com/gnjy3e

---
Edit:
Creio que foi erro do JS tbm: veja : http://prntscr.com/gnk1xu

Eu não encontrei o HTML dos slides no seu fórum, apenas a caixa de login criada pelo Shek.

Kyo Panda escreveu:Eu não encontrei o HTML dos slides no seu fórum, apenas a caixa de login criada pelo Shek.

Eu tinha posto em anuncios kkkk

Veja agora, nada resultou.
---
Edit
Tem algo haver com o JS no overall eu acho.
Veja o conflito: http://prntscr.com/gno44b , http://prntscr.com/gno4i6

UP

UP

Up

O problema aqui é aparentemente o mesmo que citei aqui. Procure no seu overall_header:

Código:

<script src="{JQUERY_PATH}" type="text/javascript"></script>

E troque por esse:

Código:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

Depois siga as orientações citadas aqui e aqui.

Apareceu algo
Veja: http://prntscr.com/gpn2tc
Quero que fique assim: http://prntscr.com/gpn35x
Como neste forum: http://br.fenixzone.com/

Seria possível?

Kyo Panda escreveu:[...] Depois siga as orientações citadas aqui e aqui.

Faltou seguir esses pontos.

Beleza, não tinha lido.
O tamanho da imagem seria 500x500.
Não há como fazer um tamanho tipo: 650x300 pelo css? Eu iria fazer uma imagem destas dimensões para ficar 100%
Fora isso, dá para por isso: http://prntscr.com/gpn7mm ?

UP

UP

UP

UP

No anúncio, procure por:

Kyo Panda escreveu:

Código:

<div class="owl-carousel">
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
  <div> Conteúdo </div>
</div>

Provavelmente estrá um pouco diferente, mas você deixa as imagens e o texto que quiser dentro de uma tag div, como por exemplo:

Código:

<div class="owl-carousel">
  <div>
    <img src="[...]" />
    <div class="owl-text-content"> Texto texto texto. </div>
  </div>
</div>

Perfeito, adicionei e resultou nisso: http://prntscr.com/grkh5r
Gostaria de deixa-los assim: http://prntscr.com/grkhhg
Fora que a imagem não está na sua resolução ideal, está muito grande.
Gostaria dela na resolução normal e centralizada no fórum, desta maneira: http://prntscr.com/grkhor
O slide << e os widgets >>

---
Edit:
Mechi no CSS para ficar assim: http://prntscr.com/grnvq4
Mas, ainda há um problema, quando eu mudo de resolução o slide também muda de posição, seria possível deixa-lo sem essa questão da resolução? (Tentei usar media quieres mas não tive sucesso).

--
Edit de novo:
Consegui resolver o problema da resolução.
Só preciso agora que o slide passe automaticamente sem precisar clicar.

UP.
Falta apenas:
Consegui resolver o problema da resolução.
Só preciso agora que o slide passe automaticamente sem precisar clicar.

No JavaScript, mude:

Código:

$(function(){
  $(".owl-carousel").owlCarousel();
});

Por:

Código:

$(function(){
  $(".owl-carousel").owlCarousel({
    loop: true,
    autoplay: true
  });
});

Perfeito, resultou.
Dá para mudar o estilo de passar os slides?
Veja a diferença do meu para esses: http://br.fenixzone.com/

Você pode explorar as opções disponíveis no plugin:

-> Página inicial: https://owlcarousel2.github.io/OwlCarousel2/
-> Documentação: https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

Caso não achar, não é possível. :/

Não entendi muito bem, teria como achar tal efeito pra mim ou me explicar melhor ?

Eu dei uma vasculhada por lá e não achei. :/
São plugins diferentes.

E o fórum mencionado pelo senhor não é da forumeiros.

Ja vi tal plug-in em um forum da forumeiros citado por um membro daqui nesta área pedindo suporte, era um fórum preto, não me recordo de qual, e tinha o mesmo efeito de slides do forum mencionado acima.
Mas acho que o efeito seria este:
https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

Troque o JavaScript por este:

Código:

$(function(){
  $(".owl-carousel").owlCarousel({
    loop: true,
    autoplay: true,
    animateOut: 'fadeOut'
  });
});

Certo, ultimos detalhes.
Dá para retirar isso:
http://prntscr.com/gsi3n9
E adicionar setas aqui: http://prntscr.com/gsi3sl ?

Precisarei do seu HTML atual dos slides.

Tome:

Código:

<div class="owl-carousel owl-theme">
                                                                                        
   <div class="owl-carousel">
                         
      <div>
                     <img src="https://i.imgur.com/RH3pj30.png" />           
         <div class="owl-text-content">
                      <span style="font-size: 20px;">CARROS <span style="color: #0099ff;">VELOZES</span> E <span style="color: #0099ff;">FURIOSOS</span></span> <br />Escrevi e sai correndo, nem eu sei porque tão lendo... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco …     
         </div>
                            
      </div>
                     
   </div>
                                                                                        
   <div>
                                                <img src="https://i.imgur.com/U1uuWqr.png" />     
      <div class="owl-text-content">
                   <span style="font-size: 20px;">SEJA UM <span style="color: #0099ff;">POLICIAL</span></span><br />Escrevi e sai correndo, nem eu sei porque tão lendo... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco …     
      </div>
                                               
   </div>
                                                                                        
   <div>
                                                <img src="https://i.imgur.com/fmxpTcY.png" />                                         
   </div>
                                                                                        
   <div>
                                                Conteúdo                                         
   </div>
                                                                                        
   <div>
                                                Conteúdo                                         
   </div>
                                                                                        
   <div>
                                                Conteúdo                                         
   </div>
                                                                                        
   <div>
                                                Conteúdo                                         
   </div>
</div>


Se possível, coloque apenas para aparecer a seta quando o usuário passar o mouse pelos slides.
(OBS: Sem muita opacity por favor, uns 0.5 acho que está bom, qualquer coisa edito ao meu gosto.)

Troque o HTML por:

Código:

<div class="owl-carousel-wrapper">
  <div id="owl-carousel-prev"><</div>
  <div class="owl-carousel owl-theme">
    <!-- Slide 1 -->
    <div>
      <img src="https://i.imgur.com/RH3pj30.png" />
      <div class="owl-text-content">
        <span style="font-size: 20px;">CARROS <span style="color: #0099ff;">VELOZES</span> E <span style="color: #0099ff;">FURIOSOS</span></span> <br />Escrevi e sai correndo, nem eu sei porque tão lendo... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco …
      </div>
    </div>
    <!-- Slide 2 -->
    <div>
      <img src="https://i.imgur.com/U1uuWqr.png" />
      <div class="owl-text-content">
        <span style="font-size: 20px;">SEJA UM <span style="color: #0099ff;">POLICIAL</span></span><br />Escrevi e sai correndo, nem eu sei porque tão lendo... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco …
      </div>
    </div>
    <!-- Slide 3 -->
    <div>
      <img src="https://i.imgur.com/fmxpTcY.png" />
    </div>
  </div>
  <div id="owl-carousel-next">></div>
</div>

E os JavaScript por este:

Código:

$(function(){
  var $owl = $(".owl-carousel").owlCarousel({
    loop: true,
    autoplay: true,
    animateOut: 'fadeOut'
  });

  $('#owl-carousel-next').on('click', function() {
    $owl.trigger('next.owl.carousel');
  });
 
  $('#owl-carousel-prev').on('click', function() {
    $owl.trigger('prev.owl.carousel');
  });
});

Deixei os estilos para que o senhor faça.
Sei que manja dos CSS's. ◕‿↼

Qualquer dúvida quanto ao CSS estarei aqui também. ^-^

Fiz alguma coisa mais ao abaixar/aumentar a resolução de tela ele vai para os lados, acabei desistindo e apagando o código, fora isso, quando ia pra dentro da imagem ele não funcionava '-' kkkk
Dá pra tentar fazer um de base ai? Só colocando os "<" e ">" dentro da imagem para não dar problemas? Só fazendo isso creio que consigo o resto.

Aqui:

Código:

.owl-carousel-wrapper,
.owl-carousel-wrapper * {
  box-sizing: border-box;
  position: relative;
}

.owl-carousel-wrapper > #owl-carousel-prev,
.owl-carousel-wrapper > #owl-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  background-color: #4c5053;
  color: #fff;
  padding: 20px;
  transition: all linear 200ms;
  cursor: pointer;
}

.owl-carousel-wrapper > #owl-carousel-prev:hover,
.owl-carousel-wrapper > #owl-carousel-next:hover {
  background-color: #000;
}

.owl-carousel-wrapper > #owl-carousel-prev {
  left: 0;
  border-radius: 0 10px 10px 0;
}

.owl-carousel-wrapper > #owl-carousel-next {
  right: -1px;
  border-radius: 10px 0 0 10px;
}

.owl-carousel-wrapper .owl-carousel .owl-item img {
  margin: 0px;
  width: 100% !important;
  max-width: none;
  margin-left: 11px;
}

Você acabou esticando minha imagem kkk, não queria ela esticada, gostaria do jeito que está.

A única forma que consegui fazê-lo foi deixando-a do tamanho original. :/

Não há necessidades, consegui fazer
Agora, necessito que apareça apenas quando o usuário estiver com mouse em cima do slide, seria possível?

Já devo ter lido esse "seria possível" mais de 50 vezes. :v

Código:

.owl-carousel-wrapper > div[id] {
  opacity: 0;
}

.owl-carousel-wrapper:hover > div[id] {
  opacity: 1;
}

Luiz escreveu:Já devo ter lido esse "seria possível" mais de 50 vezes. :v

Isso é verdade kkkkkkk, mas só adianto, pq se não for possível eu nem prossigo, as vezes pergunto por educação justamente porque vocês são voluntários e não gosto de abusar :/ ...
Certo, só uma coisinha Luiz: http://prntscr.com/gsiutj
Essas bolinhas, tem como o senhor retirar por favor?

Sim, tem como.
Adicione esta última peça:

Código:

.owl-dots {
  display: none;
}

o/

\o/ Finalmente!
Valeu @luiz.
Pode fechar cara <3