我試圖安裝此傳送帶,但我不知道如何。 在它的文檔,它說「加載所需的樣式表和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>
非常感謝。 – Lucky