当carousel图像向左滑动时，它显示图像从屏幕的末端滑动。我想从div的末尾滑动图像。我使用了bootstrap carousel图像。它之前是工作的，但当我让它只向右移动时，它从页面的末尾移动。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css">
<script src="js/script.js"></script>
<script src="js/script2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.carousel-indicators{
}
.carousel-inner{
position: relative;
width: 911px;
overflow: hidden;
left: 121px;
}
h2{
font-size: 18px;
top: -20px;
position: relative;
background: #0baadb;
height: 22px;
width: 67%;
left: 17%;
}
ol, ul{
margin-top: 0px;
margin-bottom: 0px;
}
.carousel.vertical {
position: relative;
}
.carousel.vertical .carousel-inner {
height: 100%;
width: auto;
}
p{
line-height: 1.1;
}
.carousel.vertical .carousel-inner > .item {
transition: 0.6s ease-in-out;
transform: translate3d(100%, 0, 0);
top: 0;
background: #ccc;
width: 100%;
height: 300px;
border: 1px solid #e6e6e6;
}
.carousel.vertical .carousel-inner > .item div {
text-align: center;
height: 100%;
font-size: 80px;
line-height: 300px;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev,
.carousel.vertical .carousel-inner > .right {
transform: translate3d(100%, 0, 0);
top: 0;
}
.carousel.vertical .carousel-inner > .left,
.carousel.vertical .carousel-inner > .prev.right,
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .active {
transform: translate3d(0, 0, 0);
top: 0;
}
.carousel.vertical .carousel-inner > .active.right,
.carousel.vertical .carousel-inner > .active.left {
transform: translate3d(-100%, 0, 0);
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<ol class="carousel-indicators" >
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="Images/1.jpg" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="Images/1.jpg" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="Images/1.jpg" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="Images/1.jpg" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="Images/1.jpg" style="width:100%;" class="slider_image">
</div>
</div>
</div>
</div>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
.slider {
margin: 0 0 -187px !important;
background: #6c6cf7 !important;
position: relative !important;
height: 258px !important;
padding: 54px !important;
}
.slider_image {
width: 31% !important;
position: relative !important;
top: -24px !important;
left: 599px !important;
}
.carousel-indicators li {
display: inline-block !important;
text-indent: -999px!important;
cursor: pointer!important;
background-color: rgba(0, 0, 0, 0)!important;
border: 1px solid #fff!important;
border-radius: 4px !important;
position: relative!important;
left: -355px !important;
top: -5px !important;
}
.carousel-indicators .active {
width: 11px!important;
height: 11px!important;
}
.carousel.vertical {
position: relative !important;
}
.carousel.vertical .carousel-inner {
height: 100%!important;
width: auto!important;
}
.carousel.vertical {
position: relative !important;
}
.carousel.vertical .carousel-inner {
height: 100% !important;
width: auto !important;
}
.carousel.vertical .carousel-inner > .item {
transition: 0.6s ease-in-out!important;
transform: translate3d(100%, 0, 0) !important;
top: 0!important;
background: #ccc!important;
width: 80% !important;
height: 260px !important;
border: 1px solid #e6e6e6 !important;
}
.carousel.vertical .carousel-inner > .item div {
text-align: center !important;
height: 100% !important;
font-size: 80px !important;
line-height: 300px !important;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev,
.carousel.vertical .carousel-inner > .right {
transform: translate3d(100%, 0, 0) !important;
top: 0 !important;
}
.carousel.vertical .carousel-inner > .left,
.carousel.vertical .carousel-inner > .prev.right,
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .active {
transform: translate3d(0, 0, 0) !important;
top: 0 !important;
}
.carousel.vertical .carousel-inner > .active.right,
.carousel.vertical .carousel-inner > .active.left {
transform: translate3d(-100%, 0, 0) !important;
top: 0 !important;
}
嘿，Souvik，我对堆栈溢出也很陌生，但我确实有使用carousels的经验。
它还没有响应，所以我将在这个代码笔中查看它:链接到codepen
请检查以下代码:
* {
margin: 0;
padding: 0;
}
.slider {
margin: 0 0 -187px !important;
background: #6c6cf7 !important;
position: relative !important;
height: 350px !important;
padding: 54px !important;
}
.slider_image {
width: 200px !important;
height: 200px !important;
position: relative !important;
top: -85px !important;
left: 600px !important;
object-fit: cover;
}
.slide-buttons li {
display: inline-block !important;
text-indent: -999px!important;
cursor: pointer!important;
background-color: rgba(0, 0, 0, 0)!important;
border: 1px solid #fff!important;
border-radius: 4px !important;
position: relative!important;
left: -355px !important;
top: -5px !important;
}
.carousel-indicators .active {
width: 11px!important;
height: 11px!important;
}
.carousel .vertical {
position: relative !important;
}
.carousel .vertical .carousel-inner {
height: 100%!important;
width: auto!important;
}
.carousel.vertical {
position: relative !important;
}
.carousel.vertical .carousel-inner {
height: 100% !important;
width: auto !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css">
<script src="js/script.js"></script>
<script src="js/script2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
<ol class="carousel-indicators slide-buttons" >
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="https://s2.glbimg.com/zA1FFp9GyQ0w2XPA_8ChslCnqWI=/512x320/smart/e.glbimg.com/og/ed/f/original/2020/03/27/jure-tovrljan-coronavirus-logos-grey_dezeen_2364_col_8.jpg" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPHRvtFUvNT9Rrpz2HE4gu05hPPg8m7DweCg&usqp=CAU" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="https://visionpublicidade.com.br/wp-content/uploads/2019/10/logos.png" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="https://s2.glbimg.com/fezRS3aZpA7zoqcgwiM7MQUSHek=/620x455/e.glbimg.com/og/ed/f/original/2020/03/27/jure-tovrljan-coronavirus-logos-grey_dezeen_2364_col_6.jpg" style="width:100%;" class="slider_image">
</div>
<div class="item">
<p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
amet <br>est impedit culpa dignissimos laudantium
deleniti, dicta exercitationem sit
<br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam
<br>reiciendis vero quod, corrupti dolorum magnam culpa
corporis <br>deserunt quibusdam.
Incidunt eveniet unde, ratione rem at error accusantium!</p>
<img src="https://cdn.shopify.com/shopifycloud/hatchful_web_two/bundles/4a14e7b2de7f6eaf5a6c98cb8c00b8de.png" style="width:100%;" class="slider_image">
</div>
</div>
</div>
</div>
</body>
</html>我去掉了CSS中所有的转换，这些转换根本不起作用并且相互冲突，并留下了标准的Bootstrap旋转动画功能。我还从HTML中删除了样式。尽量保持CSS和HTML分开，有更清晰的可读性代码。
从这里我建议你做以下事情:1)。正确定位按钮2)。将图像放置在正确的位置，并根据自己的喜好调整大小。3)。如果你对媒体查询感兴趣，让你的项目响应。请看下面的链接:
链接到BootStrap媒体查询文档
4)。如果你想更改幻灯片的过渡，请查看以下关于使用CSS转换的文档:使用CSS转换
5)。使用浏览器和google chrome控制台来测试你的更改，如果你还没有这样做的话。
让我知道进展如何，祝你好运!