3
Vou te dar uma resposta apenas com CSS a primeira parte dela é baseada nessa pergunta Propriedades counter no CSS. Para que servem e como funcionam? e mas basicamente ela usa a propriedade counter do CSS para contar quantas LI imagens vc tem dentro de um container e qual delas está ativa.
Primeiro veja esse modelo básico para entender o conceito.
Repare ...
respondida 18/02/19 às 21:28
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
3
Cara fiz uma adaptação com transform e transition, até que ficou bem legal, pode ser que vc tenha que ajustar um padding ou margin para ajusta-la no seu layout final.
Segue o código referente a imagem acima:
$('.owl-carousel.vitrine').owlCarousel({
center: true,
items: 3,
loop: true,
//autoWidth:true,
margin: 10,
responsive: {
...
respondida 19/12/18 às 14:45
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
3
Existe esse plugin para criar thumbnail no owl-carrousel.
Basicamente, você adiciona ele na chamada do owl:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
thumbs: true,
thumbsPrerendered: true
});
});
E depois adiciona as thumbnail no HTML:
<div class="owl-carousel" data-slider-id="1">
<div>Your Content</div&...
2
Você pode usar o array_chunk para cortar o array em pedaços. No caso vai cortar em 2 pedaços. Então se tiver 12, será 6 em cima e 6 embaixo.
Tem que pegar o total de itens e dividir por 2, e colocar o resultado no segundo parâmetro do array_chunk.
<?php
# Aqui você pega o total de registros e divide por 2 para pegar metade.
# O resultado você ...
respondida 25/01/17 às 15:21
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
2
Simples, você estava com 2 arquivos da jQuery e ordem das dependências invertidas, segue a solução funcional:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/estilo.css">
<!-- Important Owl stylesheet -->
<link rel="...
2
Pra quem estiver com essa dúvida consegui criando uma classe own-carousel-top, depois fazendo a chamada dela na DIV, segue os dados:
.owl-carousel-top .owl-next, .owl-carousel-top .owl-prev {
top: 28%!important;
opacity: .5;
position: absolute;
background: none!important;
font-size:100px!important;
}
.owl-carousel-top .owl-next {
...
2
Existe uma forma de reverter esse CSS apenas para os filhos de um determinado Container. Então, no caso, vc coloca o Carrossel dentro de uma section e determina que tudo dentro dessa section vai ter outros valores... valores iniciais...
Como vc tem um seletor universal * que vc não quer deixar incidir no Carrossel vc coloca section * { outras propriedades } ...
respondida 4/05/19 às 23:09
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
2
Cara tinha alguns detalhe que eu mudei e aqui está funcionando, primeiro que tem umas aspas " sobrando no sue código, depois que essa versão do jQuery é bem antiga.
Além disso, vc tem só 3 imagens, que é justamente o padrão minimo de itens por slide, o que quero dizer é que o carrossel só ativa quando tem no minimo 4 itens ou mais por padrão na ...
respondida 29/04/19 às 14:01
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Apenas se você atualizar as versões que for utilizar na aplicação.
Quando você instala esses frameworks como dependência na sua aplicação você define qual é a versão exata que deseja utilizar. Novas versões dos frameworks não irão interferir na sua aplicação, a menos que você manualmente os atualiza. Essa independência entre as versões fica muito mais ...
respondida 21/10/19 às 14:41
Woss
71,4mil1414 medalhas de ouro104104 medalhas de prata190190 medalhas de bronze
1
Cara eu tentei fazer adicionando as classes owl-carousel e owl-theme por jQuery quando a tela fosse menor que 768px, mas não deu muito certo... Então basicamente eu tive que replicar o conteúdo e usar d-none d-md-block e d-block d-md-none para mostrar e esconder o Owl Carrossel ou o Grid mostrando todos os itens como está na imagem abaixo.
Segue o código ...
respondida 27/12/18 às 23:37
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Consegui resolver o meu problema com uma verificação da quantidade de registros retornados da pesquisa, meio tabajara mas deu certo, fiz um IF para mostrar a classe quando existir mais de um Thumb gerado, senão, mostra normalmente uma imagem grande, existindo mais de um Thumb, mostra a imagem grande e o carrocel, fiz assim:
<!-- MOSTRAR OU NÃO ...
respondida 10/10/18 às 14:26
adventistapr
5.4881111 medalhas de ouro3939 medalhas de prata8383 medalhas de bronze
1
Cara fiz esse exemplo tentando usar ao máximo os componentes padrão do Bootstrap já que vc falou que está usando ele. Também fiz o carrocel com o Owl Caroucel como vc havia falado que está usando.
Tive que colocar alguns elemento com position:absolute para poder posicionar sobre o slider, porém ficou todo 100% responsivo e funcionando. A navbar original do ...
respondida 9/10/18 às 0:43
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Cara vc pode criar um pequeno CSS, duas linhas apenas, para corrigir isso.
Primeiro vc da display flex no container, e depois alinhas as div em uma coluna inversa com flex-direction: column-reverse !important; Assim a ordem dos elemento fica "invertida" começando de baixo para cima, dessa forma primeiro veem as bolinhas, depois setas e depois as imagens.
...
respondida 11/09/18 às 10:38
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Procurando entre diversas documentações, consegui encontrar uma possível solução:
Ao invés de declarar como nav:true, declare como navigation:true e provavelmente aparecera o next e o prev, e a partir daí, é só manipular os itens através das classes .owl-prev e .owl-next.
Exemplo:
JS:
$('.owl-carousel').owlCarousel({
loop:true,
navigation:true,
...
1
Você pode utilizar Callbacks para personalizar um evento.
Para não repetir linhas de código, criamos uma função:
function changeActive(e) {
// Remove o seletor classe de todos item
$('.owl-stage .owl-item').removeClass('ativo');
setTimeout(function() {
// Adiciona o seletor classe nos item da pagina ativa
$('.owl-stage .active:...
respondida 11/02/18 às 23:29
NoobSaibot
9.49455 medalhas de ouro2020 medalhas de prata4747 medalhas de bronze
1
Passei por este problema a pouco tempo, no meu caso eu precisei encapsular o owl-carousel dentro de um component.
owl-carousel.vue
<template>
<ul>
<slot></slot>
</ul>
</template>
<script src="./owl-carousel.vue.js"></script>
<style src="./owl-carousel.vue.css"></style>
owl-carousel.vue....
1
Mude o autoplay para false:
var owl = $('.slider').owlCarousel({
items: 1,
loop: true,
autoplay: false, //AQUI
autoplayTimeout: 6000,
autoplayHoverPause: false,
margin: 0,
stagePadding: 0,
smartSpeed: 2000,
responsiveClass: true,
responsive: {
0: {
margin: 0,
stagePadding: 0
},
...
respondida 14/09/17 às 17:35
1
Descobri o problema. É um bug do próprio Owl Carousel.
Pode voltar o loop.
loop: true.
Pode tirar aquelas outras opções:
URLhashListener:true,
startPosition: 'URLHash'
Esses dois de cima é só para alterar a URL, o Hash:
#one #two.
Agora o que você tem que fazer é importar esse arquivo de script abaixo no seu código, abaixo do owl.carousel.min.js ou ...
respondida 7/10/15 às 20:53
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
1
Esse método tem na documentação, veja:
http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html#seven
URLhashListener:true
startPosition: 'URLHash'
Só implementar.
$('.owl-carousel').owlCarousel({
items:4,
loop:false,
center:true,
margin:10,
URLhashListener:true, // ESSE
autoplayHoverPause:true,
startPosition: 'URLHash' //...
respondida 6/10/15 às 14:27
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
1
Consegui resolver. Foi simples, até.
$(".owl-carousel-linhas").each(function (index, obj){
$(this).data('owlCarousel').destroy();
});
Troquei o obj por $(this).
respondida 16/06/15 às 14:51
Diego Souza
16,4mil33 medalhas de ouro2626 medalhas de prata8282 medalhas de bronze
1
Baseado no seu comentário, vou fazer uma alteração que talvez resolva o seu problema, colocando esse código dentro do seu if:
while($(".owl-carousel-linhas").length > 0){
$($(".owl-carousel-linhas")[0]).data('owlCarousel').destroy();
}
Verifique se isso resolve o seu problema.
respondida 16/06/15 às 14:39
Felipe Avelar
9.29233 medalhas de ouro3232 medalhas de prata5656 medalhas de bronze
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
owl-carousel × 44javascript × 22
jquery × 21
css × 14
html × 11
carousel × 7
html5 × 5
css3 × 5
twitter-bootstrap × 3
vue.js × 2
front-end × 2
javascript-eventos × 2
layout-responsivo × 2
slider × 2
php × 1
angularjs × 1
angular × 1
wordpress × 1
mobile × 1
bootstrap-3 × 1
bootstrap-4 × 1
framework × 1
plugin × 1
declaração-de-variável × 1
pseudo-classes × 1