如何在Bootstrap轮播的carousel-indicators内显示图片与文字？

Alright, I see what you're trying to do with those Bootstrap carousel indicators—hide the text until the indicator is active, right? Let's tweak your existing code to make that happen perfectly, with smooth transitions and clean layout.

Step 1: Update the CSS for Indicator Behavior #

The key is to hide the text spans by default, then reveal them only when the indicator is active. We'll also adjust the layout to make the image and text sit nicely together in the expanded active state.

Replace your existing CSS with this modified version:

.carousel-inner .item {max-height: 480px;}
.item img{width: 100%;}
.carousel-inner .item:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
body .carousel-indicators{ left: 0; width: auto; margin-left:0; padding: 20px 10px; border-radius: 40px; }

/* Default inactive indicator styles */
body .carousel-indicators li{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
  background-color: #fff;
  transition: all 1s ease; /* Smooth state transition */
}

/* Hide text by default */
.carousel-indicators li span{
  display: none;
  margin-left: 10px;
  font-weight: 600;
  color: #333;
}

/* Active indicator styles */
body .carousel-indicators .active{
  width: 150px;
  height: 50px;
  border-radius: 40px;
  justify-content: flex-start;
  padding-left: 15px;
}

/* Show text only when indicator is active */
.carousel-indicators .active span{
  display: inline-block;
}

.carousel-indicators li img{width: 25px; /* Adjust image size for better fit */}
.carousel-control { width: 10%; }
.carousel-control .fa { position: absolute; top: 50%; z-index: 5; display: inline-block; }
.carousel-control.left, .carousel-control.right{background-image: none;display: none;}
.carousel-caption h2,.carousel-caption h3 {text-transform: uppercase;font-weight: 800; letter-spacing: 2px;}
.carousel-caption h3 { color: #000000; padding: 10px 0; font-size: 35px; }
.carousel-caption h2 { display: inline-block; font-size: 30px; }
.carousel-caption p { color: #000000; font-weight: 300; padding: 24px 0; }
.carousel-caption p.personal_text_ligt{font-size: 28px;}
.carousel-caption p.business_text_ligt{font-size: 28px;}
.carousel-caption p.home_text_ligt{font-size: 28px;}
.carousel-caption p.advisory_text_light{font-size: 24px;}
.carousel-caption{left: 25%;top: 20px;text-shadow:none;text-align: left;}
.text_bg { background: #0065B3; color: #fff; padding: 11px 45px; }
.light_green{color: #00876D;font-weight: bold;}
.light_orange{color: #FF7D01;}
.offer_now_text{font-weight: bold;font-size: 35px;text-transform: uppercase;}
.animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

Key Changes Explained:

• Added display: flex to inactive indicators to perfectly center the image
• Set <span> elements to display: none by default (hides text until active)
• Updated the active indicator to use justify-content: flex-start and added padding to make space for both image and text
• Added a smooth transition to the inactive indicator so the size change feels natural
• Adjusted the image size to fit better in both circular (inactive) and expanded (active) states

Step 2: Verify Your HTML Structure #

Your existing HTML is already set up correctly—each indicator <li> has both an <img> and <span> element. No changes needed here, but double-check you have this structure:

<ol class="carousel-indicators">
  <li data-target="#img-carousel" data-slide-to="0" class="active"><img src="http://static.appstore.vn/a/uploads/thumbnails/032016/cornie-icons_icon.png"><span>Slider 0</span></li>
  <li data-target="#img-carousel" data-slide-to="1"><img src="https://storage.backtory.com/beeptunes/content/user/pic/a303ce74-09c5-4a8b-bd14-b4518255eba7.png"><span>Slider 1</span></li>
  <li data-target="#img-carousel" data-slide-to="2"><img src="http://kodiupdate.com/wp-content/uploads/2017/02/What-is-kodi-Skin-icon.png"><span>Slider 2</span></li>
</ol>

Now when you test the carousel, inactive indicators will only show the circular image, and the active one will expand smoothly to display both the image and its label.

内容的提问来源于stack exchange，提问作者user6930268