2017-10-17 39 views
0

我試圖安裝此傳送帶,但我不知道如何。 在它的文檔,它說「加載所需的樣式表和JS」,給我這個代碼:在頁面上安裝腳本

import 'owl.carousel/dist/assets/owl.carousel.css'; 
import $ from 'jquery'; 
import 'imports?jQuery=jquery!owl.carousel'; 

但我不知道在哪裏以及如何做到這一點,完整的文檔是在這裏:https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

我只是要求有人教我如何去做,我真的需要在我的代碼中使用這個東西,但我不知道到目前爲止。

.div-aperto-maos { 
 
\t 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t padding: 0%; 
 
\t 
 
\t 
 
\t } 
 

 
.aperto-maos { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.areas-de-atuacao { 
 
    background-color: rgba(15,105,75,1.00); 
 
\t text-align: center; 
 
\t color: white; 
 

 
\t 
 
} 
 

 
.areas-de-atuacao hr { 
 
\t border-width: 5px; 
 
\t border-color: white; 
 
\t width: 70px; 
 
\t padding-top: 5%; 
 
} 
 

 
.areas-de-atuacao h2 { 
 
\t font-size: 50px; 
 
\t padding-top: 5%; 
 
} 
 

 

 
.cartoes-container { 
 
\t 
 
\t height: 2350px; 
 
\t background-color: rgba(15,105,75,1.00); 
 
} 
 

 
.cartoes-atuacao { 
 
\t margin-left: 5%; 
 
\t margin-top: 1%; 
 
\t border-radius: 15px; 
 
\t max-height: inherit; 
 
\t text-align: center; 
 
\t height: 750px; 
 
\t background-color: white; 
 
\t background-image: -webkit-linear-gradient(bottom, #FFFFFF 80%, #D3D3D3 00%); 
 
} 
 

 
.cartoes-atuacao h2 { 
 
\t color: rgba(15,105,75,1.00); 
 
\t font-size: 45px; 
 
} 
 

 
.cartoes-atuacao h3 { 
 
\t 
 
\t font-weight: 300; 
 
\t color: grey; 
 
\t margin-top: 40px; 
 
\t font-size: 34px; 
 

 
} 
 

 
.img-card { 
 
\t border: solid; 
 
\t border-width: 0.1px; 
 
\t border-radius: 100%; 
 
\t margin-top: 10%; 
 
} 
 

 

 

 

 
.artigos-e-noticias { 
 
    background-color: white; 
 
\t text-align: center; 
 
\t color: white; 
 

 
\t 
 
} 
 

 
.artigos-e-noticias hr { 
 
\t border-width: 5px; 
 
\t border-color: rgba(15,105,75,1.00); 
 
\t width: 70px; 
 
\t padding-top: 5%; 
 
} 
 

 
.artigos-e-noticias h2 { 
 
\t color: black; 
 
\t font-size: 50px; 
 
\t padding-top: 5%; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 

 

 

 
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> 
 
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> 
 
<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> 
 
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 

 

 

 

 
import 'owl.carousel/dist/assets/owl.carousel.css'; 
 
import $ from 'jquery'; 
 
import 'imports?jQuery=jquery!owl.carousel'; 
 
\t 
 

 
\t 
 

 

 

 

 
<link href="Home.css" type="text/css" rel="stylesheet"> 
 
<title>Home</title> 
 
</head> 
 

 
<body> 
 

 
<section id="conte-equiepe"> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
\t <div class="col-md-12 div-aperto-maos"> 
 
\t \t 
 
\t \t <img class="img-fluid aperto-maos" src="Imagens/conte-com-uma-equipe.png"> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
</section> 
 

 
<section> 
 
\t 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4 areas-de-atuacao"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t <div class="col-md-4 areas-de-atuacao"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <h2> Áreas de Atuação </h2> 
 
\t \t \t \t <hr> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4 areas-de-atuacao"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
\t </div> 
 
\t 
 
\t \t 
 
\t \t \t 
 
\t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t 
 
\t 
 
\t 
 
</section> 
 

 
<section> 
 
\t <div class="container-fluid cartoes-container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3 cartoes-atuacao"> 
 
\t \t \t \t 
 
\t \t \t \t <img class="img-fluid img-card" src="Imagens/card1.png"> 
 
\t \t \t \t <h2> Direito Civil</h2> 
 
\t \t \t \t <h3> Assessoria preventiva, 
 
consultiva e contenciosa 
 
relacionadas a obrigações e 
 
contratos, execuções 
 
judiciais, responsabilidade 
 
civil, indenizações e demais 
 
conflitos de natureza civil.</h3> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t 
 
\t 
 
\t 
 
</section> 
 
    
 
<section> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-4 artigos-e-noticias"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t <div class="col-md-4 artigos-e-noticias"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <h2> Ártigos/Notícias </h2> 
 
\t \t \t \t <hr> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4 artigos-e-noticias"> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
\t </div> 
 
</section> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
    $('.owl-carousel').owlCarousel(); 
 
});</script> 
 

 
<div class="owl-carousel owl-theme"> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
    <div> <img src="Imagens/conta.png"></div> 
 
    <div> <img src="Imagens/conta.png"> </div> 
 
</div> 
 

 

 
</body> 
 
</html> 
 

 
<script src="jquery.min.js"></script> 
 
<script src="owlcarousel/owl.carousel.min.js"></script>

回答

2

你的代碼中有很多噪音,這裏是一個工作的例子。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> 
 

 

 
<div class="owl-carousel owl-theme"> 
 
    <div> <img src="https://c402277.ssl.cf1.rackcdn.com/photos/13100/images/featured_story/BIC_128.png?1485963152"> </div> 
 
    <div> <img src="https://c402277.ssl.cf1.rackcdn.com/photos/13100/images/featured_story/BIC_128.png?1485963152"> </div> 
 
    <div> <img src="https://c402277.ssl.cf1.rackcdn.com/photos/13100/images/featured_story/BIC_128.png?1485963152"> </div> 
 
    <div> <img src="https://c402277.ssl.cf1.rackcdn.com/photos/13100/images/featured_story/BIC_128.png?1485963152"> </div> 
 
    <div> <img src="https://c402277.ssl.cf1.rackcdn.com/photos/13100/images/featured_story/BIC_128.png?1485963152"> </div> 
 
</div> 
 

 
<script> 
 
    function main() { 
 
    $('.owl-carousel').owlCarousel(); 
 
    } 
 
</script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" onload="main()"></script>

+1

非常感謝。 – Lucky

0

你應該使用importWebpack/Babel

如果您只是想使用代碼,您可以打開此文件並將其全部複製到代碼中。

請注意代碼的順序。

0

https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

你需要的文件夾中OwlCarousel2-2.2.1 \ DISTOwlCarousel2-2.2.1 \ DIST \資產

在您的項目中創建owlcarousel並將文件個owl.theme.default.min.css,owl.carousel.min.css和owl.carousel.min.js

記住要下載jQuery的https://jquery.com/download/並把jquery.min.js在你的根文件夾

按照安裝說明的順序,它應該工作

+0

歡迎來到Stackoverflow。如果你結賬[如何回答](https://stackoverflow.com/help/how-to-answer)頁面,以便在堆棧溢出的未來努力將會更好。 -謝謝 – Momin