【发布时间】：2021-04-10 05:23:29
【问题描述】：
我是 react js 的新手，我已经在 HTML CSS 中实现了具有多个项目滑块的 Owl carousel，但我希望它在 react js 中进行转换，任何人都可以在这方面帮助我。我已经在这里编写了 HTML 代码以及所需的输出。它一次显示 4 个项目，当单击前进按钮时，向前移动一个项目。 this is the output
$(document).ready(function() {
$("#news-slider").owlCarousel({
items: 4,
navigation: true,
navigationText: ["", ""],
autoPlay: false
});
});/*slider CSS*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
.news-wrap {
width: 100%;
padding: 30px 0;
}
.news-grid {
max-width: 258px;
height: 268px;
position: relative;
background: #fff;
border-radius: 5px;
overflow: hidden;
border: 1px solid #ddd;
/*box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);*/
margin: 10px;
padding: 25px;
}
.half {
position: relative;
height: 40%;
}
.news-grid img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto auto 0;
/* position to bottom and center */
max-height: auto;
width: 25%;
object-fit: cover;
}
.news-grid-txt {
text-align: center;
font-family: "Roboto";
color: rgb(127, 130, 137);
font-size: 15px;
font-weight: 300;
}
.news-grid-txt h4 {
margin-top: 10px;
font-weight: 300;
font-size: 18px;
}
.news-grid a {
color: black;
text-decoration-line: none;
}
/*Hover-Section*/
.news-grid:hover a {
text-decoration-line: none;
}
/*OWL*/
.owl-controls .owl-buttons {
position: relative;
}
.owl-controls .owl-prev {
padding: 8px 17px;
top: 1rem;
right: 3.5rem;
border: 1px solid rgb(228, 229, 231);
background-color: rgb(255, 255, 255);
}
.owl-controls .owl-next {
padding: 8px 17px;
top: 1rem;
right: 0.5rem;
border: 1px solid rgb(228, 229, 231);
background-color: rgb(255, 255, 255);
}
.owl-controls .owl-prev:after,
.owl-controls .owl-next:after {
content: '\f104';
font-family: FontAwesome;
color: rgb(100, 100, 100);
font-size: 16px;
}
.owl-controls .owl-next:after {
content: '\f105';
}
.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover {
background: rgb(122, 172, 179);
}
.owl-prev,
.owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/*End Slider*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Professory</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</head>
<body>
<div class="row slider">
<div class="col-12 mr-0">
<div id="news-slider" class="owl-carousel">
<!-- 1 -->
<div class="news-grid">
<a href="ProfessorRating.html">
<div class="half">
<img src="img/professor.png" alt="">
</div>
<div class="news-grid-txt">
<h4>Profesor Rating</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
<!-- 2 -->
<div class="news-grid">
<a href="SubjectRating.html">
<div class="half">
<img src="img/SubjectRating.png" alt="">
</div>
<div class="news-grid-txt">
<h4>Subject Rating</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
<!-- 3 -->
<div class="news-grid">
<a href="Bookstore.html">
<div class="half">
<img src="img/book.png" alt="">
</div>
<div class="news-grid-txt">
<h4>Book Store</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
<!-- 4 -->
<div class="news-grid">
<a href="ServiceProvider.html">
<div class="half">
<img src="img/ServiceProvider.png" alt="">
</div>
<div class="news-grid-txt">
<h4>Service Provider</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
<!-- 5 -->
<div class="news-grid">
<a href="MyBackpack.html">
<div class="half">
<img src="img/ServiceProvider.png" alt="">
</div>
<div class="news-grid-txt">
<h4>My Backpack</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
<!-- 6 -->
<div class="news-grid">
<a href="Classroom.html">
<div class="half">
<img src="img/ServiceProvider.png" alt="">
</div>
<div class="news-grid-txt">
<h4>Classroom</h4>
<p style="margin-bottom: 0px;">What is Lorem Ipsum Lorem text of the printing and type has been the industry</p>
</div>
</a>
</div>
</div>
</div>
</div>
</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
标签： javascript html css reactjs react-router