Estoy tratando de hacer una Galeria con owl carousel pero no me crea bien la web.
Este es mi ejemplo.
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
// Navigation
navigationText : ["Anterior","Siguiente"],
rewindNav : true,
scrollPerPage : true,
//Pagination
pagination : true,
paginationNumbers : false
});
});
<!DOCTYPE html>
<html>
<head>
<title>galowl</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
</head>
<body>
<div id="owl-slider" class="owl-slider">
<div class="item">
<img src="https://i0.fiuxy.com/da3512ac064d0df844b8c11a9228be4213c27765?url=http%3A%2F%2Fexophase.com%2Fimages%2Fmisc%2FPlayStationConsole_bkg-transparent.jpg" alt="Owl Image">
<div class="title">Titular 1</div>
</div>
<div class="item">
<img src="https://media.aws.alkosto.com/media/catalog/product/cache/6/small_image/280x/4275c8e8146210f1c7867d9f605120ed/1/_/1_27.jpg" alt="Owl Image">
<div class="title">Titular 2</div>
</div>
<div class="item">
<img src="https://cnet1.cbsistatic.com/img/pxffWV2cRa9BRTkeK7hqVdYd-fo=/830x467/2017/02/23/5bf20b56-a1a7-4587-868f-f9f848dbc7bf/nintendo-switch-console-4923.jpg" alt="Owl Image">
<div class="title">Titular 3</div>
</div>
<div class="item">
<img src="http://3.bp.blogspot.com/-CYpJofogtVs/UeQvGG__8OI/AAAAAAAAFWM/mOPkjXJpsOg/s1600/famicom.png" alt="Owl Image">
<div class="title">Titular 4</div>
</div>
</div>
</body>
</html>
div
te aparezcan alineadas en una fila deben tener la propiedaddisplay: inline-block;
O en su defecto incluye la parte del fichero css del framework que estás usando.div
con clase "owl-slider" en vez de Id, y en el codigo lo referencias con "#". En jquery el "#" significaid
y "." es para clases.