Publicado em 17 de mai.

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>

<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> &nbsp;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 -->

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

<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&oacute;veis Destaque Venda</h4>
 </div>
 </div>
	</div>

 <div class="container init_card">
 <div class="row">

<!--{<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>}-->

 </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&oacute;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&uacute;</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&uacute;</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&uacute;</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&uacute;</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&oacute;veis</h3>
 <ul>
 <li><p><a href="http://localhost/com/pagina/sobre/">Sobre N&oacute;s</a></p></li>
 <li><p><a href="http://localhost/com/pagina/links/">Links &Uacute;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&ordm; 100, Centro - Praia Grande / SP </small></p></li>
 <li><p><a href="http://localhost/com/pagina/contato/">Exibir Mapa de nossa localiza&ccedil;&atilde;o</a></p></li>
 </ul>
 </div>

	</div>
	</div>
</div><!-- end footer -->
<div id="overlay"></div>
<div class="scweb">Todos direitos reservados SC WEB IM&Oacute;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>

 <script>
 $(document).ready(function(){
 $(".owl-carousel").owlCarousel();
});
</script>
 </body>
</html>

	 ![imagem](https://forum.imasters.com.br/monthly_2018_05/image.png.7cacc794fd991892361fc56f446f3bd9.png)

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...