为什么我的轮播图片旁边有额外的 space?
Why is there extra space alongside my carousel images?
我不是职业编码员,但正在为我们的网站拼凑一个图片轮播。除了我遇到的最后一个奇怪的间距问题外,我已经完成了所有工作。在所附图片中,您会看到屏幕截图与其右侧的下一张图片按钮之间的间距太大。
这是代码(提前道歉,真的很糟糕):
// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"];
const prevBtn = document.getElementById("p-10-s-i-s-prev-btn"); // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn"); // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
var counter = 0;
prevBtn.addEventListener("click", function(){
if (counter > 0 && counter < myimages.length){
counter--;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
}
});
nextBtn.addEventListener("click", function(){
if (counter < myimages.length-1){
counter++;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
}
});
.p-10-s-i-s-page-background{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.p-10-simple-image-slider-wrapper{
max-width: 45%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
#p-10-s-i-s-image-container{
max-width: 70%;
height: auto;
display: flex;
justify-content: space-between;
}
#p-10-s-i-s-image-container img{
max-width: 70%;
height: auto;
display: flex;
align-items: center;
animation: p-10-image-animation 1s;
}
#p-10-s-i-s-prev-btn, #p-10-s-i-s-next-btn{
width: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
display: flex;
flex: 1;
align-items: center;
cursor: pointer;
color: orange;
}
#p-10-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
transition: all 1s;
}
.p-10-s-i-s-page-background h1{
color: rgb(243, 236, 176);
}
@keyframes p-10-image-animation{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
#p-11-s-i-s-caption-place-holder{
padding: 5px 150px 5px 150px;
font-family: 'Open Sans', sans-serif;
color: #565555;
text-align: left;
font-size: 18px;
line-height: 150%;
margin-bottom: 20px;
}
.yvanaplaceholder{
display: flex;
text-align: center;
justify-content: center;
}
.yvana{
color: darkgreen;
text-decoration: none;
}
.name{
color: crimson;
}
<div class="p-10-s-i-s-page-background">
<div id="p-11-s-i-s-caption-place-holder">
</div>
<div class="p-10-simple-image-slider-wrapper">
<div id="p-10-s-i-s-prev-btn"><</div>
<div id="p-10-s-i-s-image-container" ></div>
<div id="p-10-s-i-s-next-btn">></div>
</div>
</div>
在 #p-10-s-i-s-image-container
中用 justify-content: center
替换 justify-content: space-between
将解决这个问题。
// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"];
const prevBtn = document.getElementById("p-10-s-i-s-prev-btn"); // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn"); // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
var counter = 0;
prevBtn.addEventListener("click", function() {
if (counter > 0 && counter < myimages.length) {
counter--;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
}
});
nextBtn.addEventListener("click", function() {
if (counter < myimages.length - 1) {
counter++;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
}
});
.p-10-s-i-s-page-background {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.p-10-simple-image-slider-wrapper {
max-width: 45%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
#p-10-s-i-s-image-container {
max-width: 70%;
height: auto;
display: flex;
justify-content: center;
}
#p-10-s-i-s-image-container img {
max-width: 70%;
height: auto;
display: flex;
align-items: center;
/* changed */
animation: p-10-image-animation 1s;
}
#p-10-s-i-s-prev-btn,
#p-10-s-i-s-next-btn {
width: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
cursor: pointer;
color: orange;
}
#p-10-s-i-s-prev-btn:hover,
#p-10-s-i-s-next-btn:hover {
transition: all 1s;
}
.p-10-s-i-s-page-background h1 {
color: rgb(243, 236, 176);
}
@keyframes p-10-image-animation {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#p-11-s-i-s-caption-place-holder {
padding: 5px 150px 5px 150px;
font-family: 'Open Sans', sans-serif;
color: #565555;
text-align: left;
font-size: 18px;
line-height: 150%;
margin-bottom: 20px;
}
.yvanaplaceholder {
display: flex;
text-align: center;
justify-content: center;
}
.yvana {
color: darkgreen;
text-decoration: none;
}
.name {
color: crimson;
}
<div class="p-10-s-i-s-page-background">
<div id="p-11-s-i-s-caption-place-holder">
</div>
<div class="p-10-simple-image-slider-wrapper">
<div id="p-10-s-i-s-prev-btn"><</div>
<div id="p-10-s-i-s-image-container"></div>
<div id="p-10-s-i-s-next-btn">></div>
</div>
</div>
我不是职业编码员,但正在为我们的网站拼凑一个图片轮播。除了我遇到的最后一个奇怪的间距问题外,我已经完成了所有工作。在所附图片中,您会看到屏幕截图与其右侧的下一张图片按钮之间的间距太大。
这是代码(提前道歉,真的很糟糕):
// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"];
const prevBtn = document.getElementById("p-10-s-i-s-prev-btn"); // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn"); // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
var counter = 0;
prevBtn.addEventListener("click", function(){
if (counter > 0 && counter < myimages.length){
counter--;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
}
});
nextBtn.addEventListener("click", function(){
if (counter < myimages.length-1){
counter++;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;
}
});
.p-10-s-i-s-page-background{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.p-10-simple-image-slider-wrapper{
max-width: 45%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
#p-10-s-i-s-image-container{
max-width: 70%;
height: auto;
display: flex;
justify-content: space-between;
}
#p-10-s-i-s-image-container img{
max-width: 70%;
height: auto;
display: flex;
align-items: center;
animation: p-10-image-animation 1s;
}
#p-10-s-i-s-prev-btn, #p-10-s-i-s-next-btn{
width: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
display: flex;
flex: 1;
align-items: center;
cursor: pointer;
color: orange;
}
#p-10-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
transition: all 1s;
}
.p-10-s-i-s-page-background h1{
color: rgb(243, 236, 176);
}
@keyframes p-10-image-animation{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
#p-11-s-i-s-caption-place-holder{
padding: 5px 150px 5px 150px;
font-family: 'Open Sans', sans-serif;
color: #565555;
text-align: left;
font-size: 18px;
line-height: 150%;
margin-bottom: 20px;
}
.yvanaplaceholder{
display: flex;
text-align: center;
justify-content: center;
}
.yvana{
color: darkgreen;
text-decoration: none;
}
.name{
color: crimson;
}
<div class="p-10-s-i-s-page-background">
<div id="p-11-s-i-s-caption-place-holder">
</div>
<div class="p-10-simple-image-slider-wrapper">
<div id="p-10-s-i-s-prev-btn"><</div>
<div id="p-10-s-i-s-image-container" ></div>
<div id="p-10-s-i-s-next-btn">></div>
</div>
</div>
在 #p-10-s-i-s-image-container
中用 justify-content: center
替换 justify-content: space-between
将解决这个问题。
// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"];
const prevBtn = document.getElementById("p-10-s-i-s-prev-btn"); // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn"); // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
var counter = 0;
prevBtn.addEventListener("click", function() {
if (counter > 0 && counter < myimages.length) {
counter--;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
}
});
nextBtn.addEventListener("click", function() {
if (counter < myimages.length - 1) {
counter++;
myimage = myimages[counter];
mycaption = mycaptions[counter];
imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;
}
});
.p-10-s-i-s-page-background {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.p-10-simple-image-slider-wrapper {
max-width: 45%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
#p-10-s-i-s-image-container {
max-width: 70%;
height: auto;
display: flex;
justify-content: center;
}
#p-10-s-i-s-image-container img {
max-width: 70%;
height: auto;
display: flex;
align-items: center;
/* changed */
animation: p-10-image-animation 1s;
}
#p-10-s-i-s-prev-btn,
#p-10-s-i-s-next-btn {
width: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
cursor: pointer;
color: orange;
}
#p-10-s-i-s-prev-btn:hover,
#p-10-s-i-s-next-btn:hover {
transition: all 1s;
}
.p-10-s-i-s-page-background h1 {
color: rgb(243, 236, 176);
}
@keyframes p-10-image-animation {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#p-11-s-i-s-caption-place-holder {
padding: 5px 150px 5px 150px;
font-family: 'Open Sans', sans-serif;
color: #565555;
text-align: left;
font-size: 18px;
line-height: 150%;
margin-bottom: 20px;
}
.yvanaplaceholder {
display: flex;
text-align: center;
justify-content: center;
}
.yvana {
color: darkgreen;
text-decoration: none;
}
.name {
color: crimson;
}
<div class="p-10-s-i-s-page-background">
<div id="p-11-s-i-s-caption-place-holder">
</div>
<div class="p-10-simple-image-slider-wrapper">
<div id="p-10-s-i-s-prev-btn"><</div>
<div id="p-10-s-i-s-image-container"></div>
<div id="p-10-s-i-s-next-btn">></div>
</div>
</div>