1

Bom galera, eu comecei a seguir tutorial de como fazer um carousel porque estou tentando fazer com que minha pagina em HTML5/CSS3 tenha um carousel de 4 items por slide, então vi como única maneira esse plugin já que não achei outro lugar para aprender como se faz. No caso, eu estou trabalhando com o Owl-Carousel 2 que não se tem muito material para estudar, mesmo seguindo o website, fica complicado entender o funcionamento, coloquei todos os estilos necessários juntamente aos scripts e ainda assim, não consigo fazer o carousel funcionar, gostaria que alguem mais experiente por obséquio e boa vontade me explicasse como faço para colocar o owl carousel. Eis aqui meu código:

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

Deveria aparecer no parte cinza, no caso o article da classe .under, pórem nenhuma da imagens na classe aparece, nem botão nem nada

1 Resposta 1

1

Você precisa setar as opções ao iniciar o plugin:

$(document).ready(function(){
   $('.owl-carousel').owlCarousel({
      nav:true // mostra os botões
   })
});

As opções você confere na documentação do plugin.

Além do que há muitos problemas na organização do seu código: você está carregando alguns arquivos .js e .css 2 vezes, como por exemplo, o jQuery, os .js e .css do plugin.

Por exemplo, ou você carrega o owl.carousel.min.js ou owl.carousel.js, assim como os CSS: ou owl.carousel.min.css ou owl.carousel.css. Não pode carregar os dois, que são a mesma coisa, só se diferenciam pelo .min no nome, porque o .min é o respectivo arquivo minimizado (detalhes sobre a diferença entre eles você encontra nesta pergunta).

Outra coisa é organizar a ordem dos seus scripts e CSS externos. O jQuery deve vir acima dos outros e procure colocar tudo no <head>.

Veja um exemplo baseado no seu código com essas alterações:

<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!--<link rel="stylesheet" href="css/owl.theme.default.css">
        <link rel="stylesheet" href="css/owl.carousel.min.css">-->

        <style>
/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
         </style>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/animate.css">
    <script src="js/main.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.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({
      nav:true
   })
});
                  </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="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="The Last of us"></div>
            <div class="item"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="GTA V"></div>
            <div class="item"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Mirror Edge"></div>  
            <div class="item"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.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>  
    </body>
</html>

1
  • MESTRE! Por aprendizagem ingênua, sempre achei que era mais fácil errar por excesso do que por falta, na hora de carregar os plugins, pouco sabia eu a diferença que faz, obrigado pela ajuda! salvou.
    – John Jones
    Commented 29/01/2018 às 0:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .