Owl_Carousel
Fala pessoal Blz! Primeira vez que faço um slide com Owl_corousel e parece ser muito simples porém estou tentando implementa-lo em um projeto já existente. Acontece que até já consegui porém ele fica estático, só troca imagem, se clicar e arrastar para o lado e a imagem fica pequena, eu estava querendo ela grande tipo aqueles slides bonitos full-widht.
meu código abaixo, os códigos que vieram na pasta do Owl não alterei.Vou tentar postar uma imagem de como está, se alguém puder me dar uma força. O projeto é meu mesmo.
<?php session_start(); ?>
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="ISO-8859-1">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../app/css_public/node_modules/bootstrap/compiler/style.css" />
<link rel="stylesheet" href="../app/css_public/node_modules/bootstrap/compiler/bootstrap.css" crossorigin="anonymous">
<!-- Css OW -->
<link rel="stylesheet" href="../app/css/public/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../app/css/public/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<!--<link rel="stylesheet" href="../app/css_public/css/style.css" type="text/css">-->
<title>[config_site_description] - [config_site_title]</title>
</head>
<style>
.top{background-color:#000; padding:10px;}
.topinfo{background-color:#000;}
.barra{background-color: #000;color:#fff;}
/*--- menu superior */
nav .menu>li>a {
display: block;
padding: 0 25px;
height: 74px;
line-height: 74px;
text-shadow: 1px 1px #fff;
color: #172F51;
text-transform: uppercase;
text-decoration: none;
font-family: 'Oswald',Arial,"Helvetica Neue",Helvetica,sans-serif;
font-weight: 400;
font-size: 16px;
background: none;
position: relative;
}
nav .menu > li > a:hover{background-color:#A40E0E;}
nav .menu {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
nav .menu {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
nav .menu>li {
list-style-type: none;
float: left;
margin: 0 1px 0 0;
}
.cidade{background-color:aquamarine;padding:10px;}
.val{ background-color: aqua; padding: 10px;font-style:italic; font-weight: bold;}
.meio{background-color:#EEEEEE;}
.footer{background-color:#000;}
.card_item{padding:3px; font-size: 16px;}
.init_card{margin-top:10px; margin-bottom:10px;}
.item{background-color:#fff; margin-bottom: 15px;}
.fin{border-top-left-radius:5px; border-top-right-radius: 5px; background-color: burlywood; padding:5px; width:auto;}
.li_item{align-items: center;list-style-type: none;display: inline;padding: 5px;font-size:20px;}
.thumb:hover{
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
border:14px solid #CCC;
}
.footer_meio{padding:15px;}
.scweb{background-color:#ccc; color:#fff; text-align: center;}
.btn_addfav{border:none;background-color:#fff; cursor: pointer; color:#A81012;}
.btn_addfav:hover{color:#0D5607;}
.la_btn{border:1px solid #000;padding:10px 15px;margin-top:10px;}
.containerr{z-index: 9999; position: relative;top:160px;}
.tag_price{color:#0B1E35;font-weight:bold ;list-style: none; margin-left:5px; background-color:#fff; width:100px; padding-bottom: 10px;}
</style>
<body>
<!--site total-->
<!--header-->
<div class="header">
<!-- barra top -->
<div class="top">
<div class="container">
<div class="row barra">
<div class="col-sm-3">Creci</div>
<div class="col-sm-3">email</div>
<div class="col-sm-3">Telefone</div>
<div class="col-sm-3"><div id="icon_favs_saves__" onclick="window.location.href ='[baseUri]/pagina/favoritos'">
<i class="fa fas-star"></i> Imóveis Favoritos
<?php
if (isset($_SESSION['fav_saves'])){
$n1 = count($_SESSION['fav_saves']);
echo $n1;
}else{
echo '0';
}
?>
</div></div>
</div>
</div>
</div><!-- end barra top --><!-- nav menu -->
<div class="">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="#"><img src="../app/css_public/images/logo.png"/></a>
<nav>
<ul class="menu">
<li class="home"><a href="[baseUri]/">Home</a></li>
<li class="home"><a href="">Vendas</a></li>
<li class="home"><a href="">Aluguel</a></li>
<li class="home"><a href="[baseUri]/pagina/contato/">Contato</a></li>
<!-- <li class="home"><a href="">Blog</a></li> -->
<li class="home"><a href="[baseUri]/mapa/">Imóveis no Mapa</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div><!-- end menu-->
<hr>
<!--<div class="topinfo" style="color:#fff;"><h3 align="center">O seu novo Imóvel está aqui!! Use os campos de Busca avançados</h3></div>-->
</div><!--fim header-->
<div role="main" class="miolo">
<!-- search -->
<section class="buscaAvancada" style="margin: 5px;">
<div class="container">
<div class="row">
<div class="form-group">
<form id="search" class="form panel-busca hidden" action="[baseUri]/index/buscaavancada/" method="post">
<div class="row">
<div class="col-xs-6 col-sm-2">
<select name="finalidade" id="finalidade" class="sel-custom form-control">
<option value="0">Transação...</option>
<option value="1">Venda</option>
<option value="2">Locação</option>
<option value="4">Temporada</option>
</select>
</div>
<div class="col-xs-6 col-sm-2">
<select name="tipo" id="tipo" class="sel-custom form-control">
<option value="0">Tipo...</option>
<!--{loop:tpb}-->
<!--{ <option value="tpb.tipo_id" name="tpb.tipo_url">tpb.tipo_title</option>}-->
<!--{end:tpb}-->
</select>
</div>
<div class="col-xs-6 col-sm-2">
<select name="cidade" id="cidade" class="sel-custom form-control">
<option value="0">Cidade...</option>
<!--{loop:catb}-->
<!--{ <option value="catb.categoria_id" name="catb.categoria_url">catb.categoria_title</option>}-->
<!--{end:catb}-->
</select>
</div>
<div class="col-xs-6 col-sm-2">
<select name="bairro" id="bairro" class="sel-custom form-control" disabled>
<option value="0">Bairro...</option>
</select>
</div>
<div class="col-xs-6 col-sm-2">
<select name="valormax" id="valormax" class="sel-custom form-control valor_venda">
<option value="0">Preço...</option>
<option value="0">Indiferente</option>
<option value="40000">até 40.000</option>
<option value="50000">até 50.000</option>
<option value="60000">até 60.000</option>
<option value="70000">até 70.000</option>
<option value="80000">até 80.000</option>
<option value="90000">até 90.000</option>
<option value="100000">até 100.000</option>
<option value="150000">até 150.000</option>
<option value="200000">até 200.000</option>
<option value="300000">até 300.000</option>
<option value="400000">até 400.000</option>
<option value="500000">até 500.000</option>
<option value="1000000">até 1 milhão </option>
<option value="2000000">até 2 milhões</option>
<option value="5000000">até 5 milhões</option>
</select>
</div>
<div class="col-xs-6 col-sm-2">
<select name="dorms" id="dorms" class="sel-custom form-control">
<option value="0">Dormitórios</option>
<option value="0">Indiferente</option>
<option value="1">1 Dorms</option>
<option value="2">2 Dorms</option>
<option value="3">3 Dorms</option>
<option value="4">4 Dorms</option>
<option value="5">5 ou mais</option>
</select>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-6 col-sm-2"><label>Suites</label>
<select name="suites" id="suites" class="sel-custom form-control">
<option value="0">Quartos...</option>
<option value="0">Indiferente</option>
<option value="1">1 Suite</option>
<option value="2">2 Suite</option>
<option value="3">3 Suite</option>
<option value="4">4 Suite</option>
<option value="5">5 ou mais</option>
</select>
</div>
<div class="col-xs-6 col-sm-2">
<div class="form-group"><label></label><label></label>
<button type="submit" class="btn btn-block btn-primary" id="btn-busca">Pesquisar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section><!-- end search -->
<hr>
<section class="banner_top">
<div class="owl-carousel">
<!--{loop:sl}-->
<!--{<div class="slide">}-->
<!--{<a href="[baseUri]/imovel/sl.categoria_url/sl.sub_url/sl.item_id/"><div> </div>}-->
<!--{<div class="containerr">}-->
<!--{<div class="overlay">}-->
<!--{<div class="info">}-->
<!--{<div class="tag_price">sl.item_preco</div>}-->
<!--{<h3>sl.categoria_title</h3>}-->
<!--{<figure>sl.tipo_title</figure>}-->
<!--{</div>}-->
<!--{<hr>}-->
<!--{</div>}-->
<!--{</div>}-->
<!--{<div class="figure_item"><img src="[baseUri]/thumb/sl.foto_url/1900/450/crop/" alt="" title="sl.tipo_title em sl.categoria_title"></div>}-->
<!--{</a>}-->
<!--{</div>}-->
<!--{end:sl}-->
</div>
</section>
<section class="meio">
<div class="container-fluid" style="background-color: #000; color: #fff; padding: 10px;">
<div class="container ">
<div class="venda">
<h4 align="left"><i class="fas fa-search-plus"></i> Imóveis Destaque Venda</h4>
</div>
</div>
</div>
<div class="container init_card">
<div class="row">
<!--{loop:i}-->
<!--{<div class="col-xs-6 col-sm-4">}-->
<!--{<div class="item">}-->
<!--{<div class="fin">i.tipo_title</div>}-->
<!--{<a href="[baseUri]/imovel/i.categoria_url/i.sub_url/i.item_id/">}-->
<!--{<div class="thumb"><img class="img-responsive" src="[baseUri]/thumb/i.foto_url/336/200/crop/" width="350" height="200" title="i.tipo_title em i.sub_title - i.categoria_title por i.item_preco"/></div>}-->
<!--{</a>}-->
<!--{<span class="info">}-->
<!--{<span class="cidade">i.categoria_title</span>}-->
<!--{<span class="val">R$ i.item_preco</span>}-->
<!--{</span>}-->
<!--{<div class="cat_item">}-->
<!--{<ul>}-->
<!--{<li class="li_item" title="Dormitórios"><i class="fas fa-bed"></i><span> i.item_dorm</span></li>}-->
<!--{<li class="li_item" title="vagas"><i class="fas fa-car"></i><span> i.item_vaga</span></li>}-->
<!--{<li class="li_item" title="Banheiros"><i class="fas fa-shower"></i><span> i.item_wc</span></li>}-->
<!--{<li class="li_item" title="Área"><span>àrea i.item_area <sup>m²</sup></span></li>}-->
<!--{</ul>}-->
<!--{</div>}-->
<!--{<hr>}-->
<!--{<div class="">}-->
<!--{<?php
echo "<form method='POST'>";
echo "<input type='hidden' name='item_id_fav' value='[i.item_id]'>";
echo "<input type='hidden' name='add_tofav' value='carrinho'>";
?>}-->
<!--{<span></span><span>#i.item_ref <?php echo "<span><button type='submit' title='favoritos' value='Adicionar aos Favoritos' class='btn_addfav fas fa-star'></span>"; ?>}-->
<!--{<?php
echo "</form>";
if (!isset($_SESSION['fav_saves'])) {
$_SESSION['fav_saves'] = array();
}
if (isset($_POST['item_id_fav'])) {
$iditem = $_POST['item_id_fav'];
}
if (isset($_POST['add_tofav']) && $_POST['add_tofav'] == 'carrinho') {
if (!isset($_SESSION['fav_saves'][$iditem])) {
$_SESSION['fav_saves'][$iditem] = 1;
}
}
?>}-->
<!--{}-->
<!--{</div>}-->
<!--{</div>}-->
<!--{</div>}--><!--{end:i}-->
</div>
</div>
<div class="container-fluid" style="background-color: #000; color: #fff; padding: 10px;">
<div class="container">
<div class="aluguel">
<h4 align="left"><i class="fas fa-search-plus"></i> Imóveis Destaque Aluguel</h4>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="item" style="width:292px;">
<div class="fin">Alugue</div>
<div class="thumb"><img src="images/índice.jpg"/></div>
<span class="info">
<span class="val">R$250.000,00</span>
<span class="cidade">Camboriú</span>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="item" style="width:292px;">
<div class="fin">Aluguel Temporada</div>
<div class="thumb"><img src="images/índice.jpg"/></div>
<span class="info">
<span class="val">R$250.000,00</span>
<span class="cidade">Camboriú</span>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="item" style="width:292px;">
<div class="fin">Venda</div>
<div class="thumb"><img src="images/índice.jpg"/></div>
<span class="info">
<span class="val">R$250.000,00</span>
<span class="cidade">Camboriú</span>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="item" style="width:292px;">
<div class="fin">Venda</div>
<div class="thumb"><img src="images/índice.jpg"/></div>
<span class="info">
<span class="val">R$250.000,00</span>
<span class="cidade">Camboriú</span>
</span>
</div>
</div>
</div>
</div>
</section>
</div><!-- end main -->
<div class="footer">
<div class="container">
<div class="row footer_meio">
<div class="col-sm-4 col-md-4">
<h3>Next Imóveis</h3>
<ul>
<li><p><a href="http://localhost/com/pagina/sobre/">Sobre Nós</a></p></li>
<li><p><a href="http://localhost/com/pagina/links/">Links Úteis</a></p></li>
<li><p><a href="http://localhost/com/pagina/contato/">Fale Conosco</a></p></li>
<li><p><a href="javascript:;" class="go-top">Voltar ao Topo</a></p></li>
</ul>
</div>
<div class="col-sm-4 col-md-4">
<h3>Entre em Contato</h3>
<ul>
<li><p>(11) 0000-0000</p></li>
<li><p>(11) 0000-00000</p></li>
<li><p></p></li>
<li><p>teste@seusite.com.br</p></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h3>Onde Estamos</h3>
<ul>
<li><p><small>Avenida Brasil, Nº 100, Centro - Praia Grande / SP </small></p></li>
<li><p><a href="http://localhost/com/pagina/contato/">Exibir Mapa de nossa localização</a></p></li>
</ul>
</div>
</div>
</div>
</div><!-- end footer -->
<div id="overlay"></div>
<div class="scweb">Todos direitos reservados SC WEB IMÓVEIS Desemvolvido by Br7 Desenvolvimento Web</div><!-- end footer -->
<script src="js/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery/bootstrap/bootstrap.min.js"></script>
<script src="js/public/main.js" type="text/javascript"></script>
<script src="../app/css/public/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<!--[if gt IE 8]>
<script type="text/javascript" src="assets/js/ie.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
</body>
</html>
Discussão (6)
Carregando comentários...