如何实现带侧边栏的Bootstrap图片轮播？图片无法正常轮播求助

It looks like your carousel isn’t working as expected because you’re missing two critical pieces: the core Bootstrap dependencies that power its sliding functionality, and the custom JavaScript needed to sync the sidebar text with the carousel slides. Let’s get this sorted out step by step:

1. Add Required Bootstrap Dependencies #

Bootstrap’s carousel relies on three essential files to function:

• Bootstrap CSS: Handles styling and hides inactive slides by default.
• jQuery: Bootstrap’s JavaScript components depend on this library.
• Bootstrap JavaScript: Provides the logic for slide transitions and controls.

You can add these via CDNs directly in your HTML (no need to host files locally). Place the CSS in the <head> section, and the JS files right before the closing </body> tag (to ensure the DOM loads first):

<!-- Bootstrap CSS (in <head>) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">

<!-- jQuery & Bootstrap JS (before </body>) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

2. Add Custom JavaScript for Sidebar Sync #

The original Codepen example includes code to link sidebar text clicks to carousel slides, and update the active text styling when the carousel changes. You’re missing this part—add it right after the Bootstrap JS:

$(document).ready(function(){
  // Switch carousel when clicking sidebar text
  $('.result p').click(function(){
    $('#carousel-example-generic').carousel(parseInt($(this).attr('data-slide-to')));
  });
  
  // Update active sidebar text when carousel slides
  $('#carousel-example-generic').on('slide.bs.carousel', function (e) {
    $('.result p').removeClass('active-p');
    $('.result p[data-slide-to="'+e.to+'"]').addClass('active-p');
  });
});

3. Full Working Code #

Here’s the complete, fixed version of your code with all dependencies and sync logic included:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Sidebar Carousel</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<style>
body { padding-top: 50px; }
h3 { margin-bottom: 50px; }
.carousel { min-height: 200px; margin-bottom: 15px; }
.carousel-indicators li { box-shadow: 1px 1px 1px rgba(145, 145, 145, 0.5); }
p { padding: 10px; }
.active-p { background: #00BCD4; color: #fff; }
@media only screen and (min-width: 768px) { p { height: 50px; cursor: pointer; } }
@media only screen and (min-width: 992px) { p { height: 68px; } }
@media only screen and (min-width: 1200px) { p { height: 85px; line-height: 85px; padding: 0 10px 10px 10px; } }
.author { padding-bottom: 20px; margin-top: 50px; text-align: center; font-size: 14px; }
</style>
</head>
<body>
<h2 class="text-center">Bootstrap carousel with sidebar</h2>
<h3 class="text-center">This feature does not exist in official Bootstrap</h3>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-1">
<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
<li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://via.placeholder.com/600x400/D6BC65/fff?text=First+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/008A84/fff?text=Second+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/18AAA9/fff?text=Third+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/C993A0/fff?text=Fourth+img"></div>
</div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span></a>
<a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span></a>
</div><!-- /.carousel -->
</div><!-- /.col-sm-8 -->
<div class="col-sm-3">
<div class="result">
<p class="active-p" data-slide-to="0" data-target="#carousel-example-generic">01. This text is related to 01. slide</p>
<p data-slide-to="1" data-target="#carousel-example-generic">02. This text is related to 02. slide</p>
<p data-slide-to="2" data-target="#carousel-example-generic">03. This text is related to 03. slide</p>
<p data-slide-to="3" data-target="#carousel-example-generic">04. This text is related to 04. slide</p>
</div>
</div><!-- /.col-sm-8 -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="author">
Made with ♥ by Danko
</div>

<!-- jQuery & Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<!-- Custom Sync JS -->
<script>
$(document).ready(function(){
  $('.result p').click(function(){
    $('#carousel-example-generic').carousel(parseInt($(this).attr('data-slide-to')));
  });
  
  $('#carousel-example-generic').on('slide.bs.carousel', function (e) {
    $('.result p').removeClass('active-p');
    $('.result p[data-slide-to="'+e.to+'"]').addClass('active-p');
  });
});
</script>
</body>
</html>

Quick Tips #

• Stick with Bootstrap 3.4.1 (matching the original Codepen) to avoid compatibility issues.
• Always load jQuery before Bootstrap JS—Bootstrap’s scripts depend on it to run correctly.
• The custom JS ensures both manual sidebar clicks and automatic carousel slides update the active text highlight.

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