如何让我的引导轮播滑块一次移动一列？
问题描述 投票：0回答：1
对于我的项目，我有一个引导轮播。我在轮播项目中使用了四列。我使用三个滑块来适应三种不同的屏幕尺寸。我想通过每次单击右侧幻灯片箭头将幻灯片移动一列。
这是我的代码-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.slider-image{
position: relative;
}
.slider-image-content{
padding: 12px;
position: absolute;
background-color: rgba(0, 0, 0, 0.523);
width: 100%;
color: #fff;
bottom: 0;
}
.carousel-control-next, .carousel-control-prev{
opacity: 1;
width: 3rem;
}
@media screen and (max-width:992px) {
#slider-larger{
display: none;
}
}
@media screen and (min-width:991px) {
#slider-medium{
display: none;
}
}
@media screen and (max-width:768px) {
#slider-medium{
display: none;
}
}
@media screen and (min-width:767px) {
#slider-small{
display: none;
}
}
</style>
</head>
<body>
<div id="slider-larger" class="mt-3">
<div class="container">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 1</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 2</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 3</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 4</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 5</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 6</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 7</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 8</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 9</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 10</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 11</span>
</div>
</div>
</div>
<div class="col-3">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 12</span>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div id="slider-medium" class="mt-3">
<div class="container">
<div id="carouselmedium" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 1</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 2</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 3</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 4</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 5</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 6</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 7</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 8</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 9</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 10</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 11</span>
</div>
</div>
</div>
<div class="col-4">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 12</span>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselmedium" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselmedium" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div id="slider-small" class="mt-3">
<div class="container">
<div id="carouselsmall" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 1</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 2</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 3</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 4</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 5</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 6</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 7</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 8</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 9</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 10</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 11</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="slider-image">
<img class="img-fluid" src="./B923DD28-0E34-4042-8601-690DECD44224.jpeg" alt="Slider Image">
<div class="slider-image-content">
<h4>Lorem ipsum dolor sit.</h4>
<span>Image 12</span>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselsmall" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselsmall" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
我期待这个网站的第二个滑块。 https://www.serhant.com/
1个回答
0
投票
投票
代码的主要问题是如何设置使用 bootstrap 的 html 来排列幻灯片图像。您需要将每个项目放在它自己的 .carousel-item 类中。
而且，响应式设计的方法非常繁琐，每次要更新滑块时都要进行 3 次更改。
对于这个问题我没有答案。但我有另一个解决方案，事实证明它更加高效并且响应迅速。
这是我的 copdepen 链接：
https://codepen.io/13garth/pen/gOOremJ
这些是此实现所需的库：
<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">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:2,
itemsDesktop:[1000,2],
itemsDesktopSmall:[980,1],
itemsTablet:[768,1],
pagination:true,
navigation:false,
navigationText:["",""],
autoPlay:true
});
}); .owl-carousel .owl-item img {
display: block;
width: 17%;
float: left;
border: 5px solid #fff;
border-radius: 20px;
margin-left: 54px;
margin-right: 35px;
margin-top: 15px;
}
.testimonial-item.equal-height.style-6 {
background-color: #eee;
border-radius: 10px;
margin: 10px;
}
.cell-right {
text-align: center;
margin-right: 80px;
padding-top: 35px;
padding-bottom: 20px;
}
.testimonial-name {
font-weight: 600;
}
.testimonial-content.quote {
padding: 17px 55px;
}
.et_right_sidebar #main-content .container:before{
display: none;
}
#main-content .container {
padding-top: 10px;
}
i.fa.fa-quote-left {
padding: 0px 10px;
color: #999;
}<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">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slider" class="owl-carousel">
<div
class="testimonial-item equal-height style-6"
style="height: 254px"
>
<div class="testimonial-image cell-left">
<img
src="https://garthbaker.co.za/wp-content/uploads/2018/07/agreement-edited.png"
alt="Agnes A. Bell"
/>
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell</div>
<div class="testimonial-job">Assistant Project Manager</div>
</div>
<div class="testimonial-content quote">
<i class="fa fa-quote-left"> </i>This is one of the best WordPress
themes I have used. All aspects are exactly what experienced
designers and developers crave from a theme.
</div>
</div>
<div
class="testimonial-item equal-height style-6"
style="height: 254px"
>
<div class="testimonial-image cell-left">
<img
src="https://garthbaker.co.za/wp-content/uploads/2018/07/agreement-edited.png"
alt="Agnes A. Bell"
/>
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell</div>
<div class="testimonial-job">Assistant Project Manager</div>
</div>
<div class="testimonial-content quote">
<i class="fa fa-quote-left"> </i>This is one of the best WordPress
themes I have used. All aspects are exactly what experienced
designers and developers crave from a theme.
</div>
</div>
<div
class="testimonial-item equal-height style-6"
style="height: 254px"
>
<div class="testimonial-image cell-left">
<img
src="https://garthbaker.co.za/wp-content/uploads/2018/07/agreement-edited.png"
alt="Agnes A. Bell"
/>
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell</div>
<div class="testimonial-job">Assistant Project Manager</div>
</div>
<div class="testimonial-content quote">
<i class="fa fa-quote-left"> </i>This is one of the best WordPress
themes I have used. All aspects are exactly what experienced
designers and developers crave from a theme.
</div>
</div>
<div
class="testimonial-item equal-height style-6"
style="height: 254px"
>
<div class="testimonial-image cell-left">
<img
src="https://garthbaker.co.za/wp-content/uploads/2018/07/agreement-edited.png"
alt="Agnes A. Bell"
/>
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell</div>
<div class="testimonial-job">Assistant Project Manager</div>
</div>
<div class="testimonial-content quote">
<i class="fa fa-quote-left"> </i>This is one of the best WordPress
themes I have used. All aspects are exactly what experienced
designers and developers crave from a theme.
</div>
</div>
<div
class="testimonial-item equal-height style-6"
style="height: 254px"
>
<div class="testimonial-image cell-left">
<img
src="https://garthbaker.co.za/wp-content/uploads/2018/07/agreement-edited.png"
alt="Agnes A. Bell"
/>
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell</div>
<div class="testimonial-job">Assistant Project Manager</div>
</div>
<div class="testimonial-content quote">
<i class="fa fa-quote-left"> </i>This is one of the best WordPress
themes I have used. All aspects are exactly what experienced
designers and developers crave from a theme.
</div>
</div>
</div>
</div>
</div>
</div>最新问题
- plink.exe 在 PowerShell 脚本中使用时“挂起”
- Selenium + Go - 如何做？
- 为什么 Kudu 上的 NodeJS 版本与我的 App 版本不同？
- Sagemaker SDK 无法使用自定义算法运行训练
- 如何在 AWS devezium 中设置 LSN 编号以在 LSN 后启动事件日志
- Bulma - 为自己的组件定制 SCSS
- 我可以同时通过curl和@someone向团队频道发送消息吗？
- 如何在@DataJpaTest中使用用户定义的数据库代理
- Angular 17 Webpack 空白页面错误“Uncaught ReferenceError：进程未在 node_modules/util/util.js 中定义”
- 如何交互使用非标准图形设备？
- 使用 SwiftUI 在深色模式下使用 .ultraThinMaterial 时的最佳实践是什么？
- ValueError：使用可迭代设置时必须具有相等的 len 键和值 |使用 .at
- 页面导航后 Blazor .NET8 应用程序中的 Google 地图控件出现重复图标
- Automator 无法与 Google Chrome 一起使用
- GEOSERVER：从不同位置登录错误 - j_spring_security_check
- 带有附带条件的GMocking函数调用
- “我们生病了，搞砸了，很复杂，我们很混乱，我们无法治愈”[关闭]
- 如何在 Vegalite 图表中隐藏过量数据的 X 轴标签
- Next JS 14 - 使用客户端 api 标头
- 如何将ABP 5.3升级到ABP 8.1？
© www.soinside.com 2019 - 2024. All rights reserved.