【发布时间】：2022-01-04 08:34:42
【问题描述】：
我正在使用 Bootstrap 3，并制作了这个 div：
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<div class="row">
<div class="col-md-3 col-sm-6 section-two-title">
<h1 class="text-center m-0 py-2">
Newest
</h1>
<h1 class="text-center m-0 py-2">
Courses
</h1>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
结果如下所示：
但正如我在图片中提到的，我需要在卡片的左右添加两个图标才能浏览更多课程。
所以这将是一个动态内容滑块。
但我不知道该怎么做，所以如果你能帮我解决这个问题，我将不胜感激......
这里也是 CSS 部分：
.second-para{
height:500px;
background-color: #ffcc32 !important;
}
.second-section, .third-section, .fourth-section{
padding-top:100px;
}
.card-section{
border-radius: 2%;
}
.second-section img, .third-section img, .fourth-section img{
height:150px;
width:100%;
}
.second-section .item, .third-section .item, .fourth-section .item{
padding-left:5px;
padding-right:5px;
}
.second-section .item-card, .third-section .item-card, .fourth-section .item-card{
transition:0.5s;
cursor:pointer;
}
.second-section .item-card-title, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
}
.second-section .item-card-title i, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
color:#ffa710
}
.second-section .card-title i:hover,.third-section .card-title i:hover,.fourth-section .card-title i:hover{
transform: scale(1.25) rotate(100deg);
color:#18d4ca;
}
.second-section .card:hover,.third-section .card:hover,.fourth-section .card:hover{
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.second-section .card-text,.third-section .card-text,.fourth-section .card-text{
height:80px;
}
.second-section .card::before, .card::after,.third-section .card::before,.fourth-section .card::before, .card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,.third-section .card::before,.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after,.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title, .section-three-title,.section-fourth-title{
padding-top:5%;
}
.section-two-title h1, .section-three-title h1, .section-fourth-title h1{
font-size:30px !important;
}
【问题讨论】：
-
我尝试复制您的代码，但它最终看起来不像您的屏幕截图。 （使用 bootstrap@3）
-
@SalminSkenderovic 唯一的区别是方向是
ltr而不是rtl。但不会改变问题。 -
是的，就像 memite7760 所说，最好不要重新发明轮子，而是使用像 swiper.js 这样的稳定库。你可以在这里查看演示 - swiperjs.com/demos
标签： javascript css twitter-bootstrap twitter-bootstrap-3