1
Good guys, I started following tutorial on how to make a Carousel because I’m trying to make my HTML5/CSS3 page have a 4 items per slide Carousel, so I saw as the only way this plugin since I couldn’t find another place to learn how to do it. In this case, I’m working with Owl-Carousel 2 that doesn’t have much material to study, even following the website, it gets complicated to understand how it works, I put all the necessary styles together with the scripts and yet, I can’t make Carousel work, I would like someone more experienced by kindness and goodwill to explain to me how I put Owl Carousel. Here is my code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Styling links</title>
<meta name="author" content="Publio Elon">
<meta name="description" content="Curso de HTML5 e CSS3">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
</script>
<div class="content">
<header></header>
<nav>
<ul class="nav justify-content-center" role="nagivation">
</li>
<li class="nav-item">
<a class="nav-link active" href="#" id="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="produtos">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="sobre">Sobre</a>
</li>
</ul>
</nav>
<div class="secao">
<section>
<div class="bar"></div>
<div class="bartxt"><legend>Departamentos</legend></div>
<article class="milha"><h5><span class="badge badge-secondary" id="badge1">categoria 1</span></h5></article>
<article class="farol"><h5><span class="badge badge-secondary" id="badge2">categoria 1</span></h5></article>
<article class="roda"><h5><span class="badge badge-secondary" id="badge3">categoria 1</span></h5></article>
<article class="capo"><h5><span class="badge badge-secondary" id="badge4">categoria 1</span></h5></article>
<article class="retrovisor"><h5><span class="badge badge-secondary" id="badge5">categoria 1</span></h5></article>
<article class="porta"><h5><span class="badge badge-secondary" id="badge6">categoria 1</span></h5></article>
</section>
</div>
<div class="under">
<section>
<div class="bar2"></div>
<div class="bartxt2"><legend>Novidades</legend></div>
<article class="slides1">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="c1.jpg" alt="The Last of us"></div>
<div class="item"><img src="c2.jpg" alt="GTA V"></div>
<div class="item"><img src="c3.jpg" alt="Mirror Edge"></div>
</div>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</script>
</article>
<div class="bar3"></div>
<div class="bartxt3"><legend>Mais Procurados</legend></div>
<article class="slides2">
<div class="bubblebox">
<div id="bubbles">
<div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;" active></div>
<div onclick="bubbles(1); clearInterval(intrvl);" style="background:#999;"></div>
<div onclick="bubbles(2); clearInterval(intrvl);" style="background:#999;"></div>
<div onclick="bubbles(3); clearInterval(intrvl);" style="background:#999;"></div>
</div>
<hr>
<div id="bubblecontent">
<h1><span class="badge badge-secondary">Mais procurados</span></h1>
<p>Confira os produtos mais procurados na loja Plug!</p>
<script>
function _(x){return document.getElementById(x);}
// Variables for bubble array, bubble index, and the setInterval() variable
var ba, bi=0, intrvl;
// bca - Bubble Content Array. Put your content here.
var bca = [
'<h2>Galaxy S5</h2><p>R$000,00</p><img src="c1.jpg" alt="test" style="margin-left:25px;" active>',
'<h2>Asus Zenfone GO</h2><p>R$000,00</p><img src="c2.jpg" alt="test" style="margin-left:25px;">',
'<h2>iPhone X</h2><p>R$0000,00</p><img src="c3.jpg" alt="test" style="margin-left:25px;">',
'<h2>iPad 2019</h2><p>R$0000,00</p><img src="d2.jpg" alt="test" style="margin-left:25px; width:200px;">'
];
// This function is triggered by the bubbleSlide() function below
function bubbles(bi){
// Fade-out the content
_("bubblecontent").style.opacity = 0;
// Loop over the bubbles and change all of their background color
for(var i=0; i < ba.length; i++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
// Change the target bubble background to be darker than the rest
ba[bi].style.background = "#999";
// Stall the bubble and content changing for just 300ms
setTimeout(function(){
// Change the content
_("bubblecontent").innerHTML = bca[bi];
// Fade-in the content
_("bubblecontent").style.opacity = 1;
}, 300);
}
// This function is set to run every 5 seconds(5000ms)
function bubbleSlide(){
bi++; // Increment the bubble index number
// If bubble index number is equal to the amount of total bubbles
if(bi == ba.length){
bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
}
// Make the bubbles() function above run
bubbles(bi);
}
// Start the application up when document is ready
window.addEventListener("load", function(){
// Get the bubbles array
ba = _("bubbles").children;
// Set the interval timing for the slideshow speed
intrvl = setInterval(bubbleSlide, 5000);
});
</script>
</div>
</article>
</section>
</div>
<aside><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FCapasPlug%2Fvideos%2F1045127432242584%2F&width=500&show_text=false&height=280&appId" width="485" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true" colorscheme=""></iframe>
<hr>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2180.2999494348255!2d-47.52461760010365!3d-23.213491033524786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c5fe0bee099709%3A0xb669b6db542bc919!2sShopping+Porto+Miller+Boulevard!5e0!3m2!1spt-BR!2sbr!4v1516580729855" width="485" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FRitascupcakes7%2Fposts%2F10207079303059874%3A0&width=485" width="500" height="355" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<div class="fb-like" data-width="">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FCapasPlug%2F&width=98&layout=button&action=like&size=small&show_faces=true&share=true&height=65&appId" width="250" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</aside>
<footer>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img></img>
<h1 class="display-4">Plug seu celular na moda</h1>
<p>Atendimento das 10:00 as 10:10 de Segunda-feira à Sábado!<p>
<table style="width:100%">
<tr>
<th>Informações</th>
<th>Politicas</th>
<th>Serviços</th>
</tr>
<tr>
<td>Formas de Pagamento</td>
<td>Prazo de Troca</td>
<td>Troca de Películas</td>
</tr>
<tr>
<td>Descontos</td>
<td>Políticas de Troca</td>
<td>Manutenção</td>
</tr>
<tr>
<td>Sorteios</td>
<td>Regulamento de Trocas</td>
<td>Encomendas</td>
</tr>
<tr>
<td>Fornecedores</td>
<td>Reembolso</td>
<td>Atendimento ao Cliente</td>
</tr>
</table>
<i class="fa fa-facebook" aria-hidden="true"> Facebook</i>
<i class="fa fa-envelope" aria-hidden="true" id="email"> [email protected]</i>
<i class="fa fa-whatsapp" aria-hidden="true" id="whatsapp"> Whatsapp:(15)xxxx-xxxx</i>
<i class="fa fa-phone-square" aria-hidden="true "id="fone"> Telefone:(15)xxxx-xxxx</i>
</div>
</div>
<div class="alert alert-dark" role="alert" id="copyright">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
</footer>
</div>
<script src="js/main.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
.content{
background-color:gray;
width:1400px;
margin:auto;
padding: 1px;
margin-top: 20px;
}
header{
background-color:white;
width: 1398px;
height: 250px;
background-image: url("p.png");
background-position:50%;
width:100%;
}
nav{
background-color:#6de073;
width: 100%;
height:55px;
font-size:20px;
}
nav .nav-item:hover{
background-color:#c8fc80;
border-bottom: 3px solid white;
border-radius:12px;
border-bottom-width:5px;
transform:scale(1.1);
animation:buttonselect 0.45s 1;
-webkit-animation: buttonselect 0.45s 1;
}
@-webkit-keyframes buttonselect{
from{border-bottom-width:0px;}
to{border-bottom-width:3px;}
}
@keyframes buttonselect{
from{border-bottom-width:0px;}
to{border-bottom-width:3px;}
}
nav .nav-item #home, #produtos, #sobre, #facebook{
margin-right:1px;
margin-top:3.5px;
-webkit-animation: buttonselect 0.45s 1; /* Safari 4.0 - 8.0 */
animation:highlight buttonselect 0.45 1;
}
.bartxt{
margin-top:-35px;
margin-left:20px;
font-size:26px;
}
.bar{
margin-top:190px;
height:5px;
width:900px;
background-color:#c401b7;
opacity:0.5;
}
.bartxt2{
margin-top:-35px;
margin-left:20px;
font-size:26px;
}
.bar2{
margin-top:190px;
height:5px;
width:900px;
background-color:#c401b7;
opacity:0.5;
}
.bartxt3{
margin-top:-35px;
margin-left:20px;
font-size:26px;
}
.bar3{
margin-top:570px;
height:5px;
width:900px;
background-color:#c401b7;
opacity:0.5;
}
section{
background-color:#fff;
width: 900px;
height: 1800px;
margin-top:1px;
box-sizing:border-box;
padding: 1px;
float:left;
}
article{
background-color: #ccc;
width: 250px;
height:400px;
float:left;
margin:20px;
margin-top:50px;
transform-style: preserve-3d;
}
#badge1, #badge2, #badge3, #badge4, #badge5, #badge6{
width:100px;
height:25px;
margin-top:-35px;
margin-left:75px;
position:absolute;
background-color:red;
cursor:pointer;
}
.secao .capo, .retrovisor, .porta{
margin-top:300px;
}
.secao .milha:hover{
//-webkit-transform: rotateY(180deg);
//-moz-transform: rotateY(180deg);
//-ms-transform: rotateY(180deg);
//-o-transform: rotateY(180deg);
//transform: rotateY(180deg);
//backface-visibility: hidden;
//transition: transform 1s linear 0s;
//transition: -webkit-transform 1s linear 0s;
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
.secao .farol:hover{
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
.secao .roda:hover{
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
.secao .capo:hover{
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
.secao .retrovisor:hover{
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
.secao .porta:hover{
background-position: 50% 50%;
background-image: url(b2.jpg);
border-style:outset;
-webkit-animation: highlight 2.45s infinite; /* Safari 4.0 - 8.0 */
animation: highlight 2.45s infinite;
animation-iteration-count: 1;
cursor:pointer;
}
figcaption{
text-align: justify;
padding: 50px;
margin-left:250px;
height:1px;
float:left;
}
aside{
float:left;
background-color: white;
width:496px;
height: 3609px;
margin-top: -1801px;
margin-left:2px;
margin-bottom: 5px;
}
.content .under section{
margin-bottom:1px;
height:1807px;
}
.slides1{
//background-image: url(b2.jpg);
width:450px;
height:450px;
background-position:50%;
margin-top:35px;
margin-left:200px;
}
footer{
margin-top: 5px;
background-color:#fff;
width: 100%;
height:360px;
clear: both;
}
img{
margin-left:0px;
clear:both;
}
.secao{
width: 100%;
background-color:black;
}
.under .slides1{
margin-top:50px;
}
.under .carousel-control-next{
background:black;
margin-top:175px;
height:75px;
}
.under .carousel-control-prev{
background:black;
margin-top:175px;
height:75px;
}
.jumbrotron{
height:400px;
margin-bottom:250px;
background-color:rgba(0,0,0,0.5);
opacity:5;
}
.jumbotron .container i{
margin-top:15px;
margin-left:120px;
color:white;
float:left;
cursor:pointer;
}
.jumbotron p{
color:white;
}
.jumbotron table{
color:white;
}
.jumbotron img{
background-image: url(plug.png);
}
div .jumbotron{
height:361px;
border-radius:12px;
background-color:#6de073;
}
.alert{
border-radius:12px;
height:150px;
}
#bubblebox{ width:650px; height:250px; margin:50px auto; border:1px solid #AAA; }
#bubbles{ width:auto; margin:0px auto; text-align:center; }
#bubbles > div{ display:inline-block; width:10px; height:10px; margin:24px 10px 0px 10px; background:rgba(0,0,0,.1); text-align:center; border:2px solid #999; border-radius:100%; font-size:17px; text-decoration:none; transition: background 0.3s linear 0s; cursor:pointer; }
#bubblecontent{ margin:0px auto; transition:opacity 0.3s linear 0s; font-family: Arial;}
#bubblecontent > h2{ text-align:center; color:#7EA800; }
#bubblecontent > p{ font-size:17px; line-height:1.5em; padding:20px 50px; color:#777; }
.slides2{
margin:auto;
background-color:white;
margin-left:300px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}It should appear in the gray part, in case the class article . under, put none of the images in the class appears, or button or anything
MASTER! By naive learning, I always thought it was easier to err by excess than by default, when loading the plugins, little did I know the difference that makes, thanks for the help! saved.
– John Jones