Owl Carousel how to use? HTML5 CSS3

1
Well, I started to follow the tutorial on how to make a carousel because I'm trying to make my HTML5 / CSS3 page have a carousel of 4 items per slide, so I saw this plugin's only way since I did not find another place to learn how. In the case, I'm working with Owl-Carousel 2 that does not have much material to study, even following the website, it is difficult to understand the operation, I put all the necessary styles together with the scripts and still, I can not make the carousel work , I would like someone more experienced by goodwill and goodwill to explain how I put the owl carousel. Here's 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><scriptsrc="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 the case the class article .under, neither of the images in the class appears, neither button nor anything

    
asked by anonymous 29.01.2018 / 00:41

1 answer

1

You need to set the options when starting the plugin:

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

The options you check in plugin documentation .

In addition there are many problems organizing your code: you are loading some .js and .css 2 files, such as jQuery, .js and .css of the plugin.

For example, either you load owl.carousel.min.js or owl.carousel.js , as well as CSS: or owl.carousel.min.css or owl.carousel.css . You can not load the two, which are the same thing, only differ by the .min in the name, because the .min is the respective file minimized (details about the difference between them you find in this question ).

Another thing is to organize the order of your external scripts and CSS. JQuery should come above the others and try to put everything in <head> .

See an example based on your code with these changes:

<!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><!--<linkrel="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><linkrel="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>
    
29.01.2018 / 01:33