如何实现可左右切换的简易轮播图？

Hey there! Let's get that carousel working properly. I've gone through your code and updated it to add the left/right slide functionality with wrap-around behavior, while keeping your existing responsive foundation intact.

Key Changes Made: #

• Added position: relative to the carousel <ul> so we can adjust its horizontal position
• Created a reusable initCarousel function to avoid repeating dimension calculation logic
• Added a currentPosition variable to track the carousel's current offset
• Implemented click handlers for both arrows that handle slide movement and wrap-around to the first/last set of items
• Added smooth slide animation with CSS transitions for better UX

Full Updated Code #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="page-body">
  <div class="container-slide">
    <div class="container-slide-overflow">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>
    <div class="box-arrow-control">
      <button id="left-arrow">←</button>
      <button id="right-arrow">→</button>
    </div>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#page-body {
  width: 350px;
  position: relative;
  min-height: 10px;
  margin-left: auto;
  margin-right: auto;
}

.container-slide ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative; /* Required for position adjustment */
  transition: left 0.3s ease; /* Smooth slide animation */
}

.container-slide ul:before, .container-slide ul:after {
  content: '';
  display: table;
}

.container-slide ul:after {
  clear: both;
}

.container-slide ul>li {
  float: left;
  background: orange;
  text-align: center;
  color: #ffffff;
  padding: 50px;
}

.container-slide-overflow {
  overflow: hidden;
}

.container-slide {
  position: relative;
}

.container-slide button {
  width: 30px;
  height: 30px;
  background: red;
  border: none;
  color: #ffffff;
  position: absolute;
  z-index: 999;
  cursor: pointer; /* Visual cue for clickable buttons */
}

#left-arrow {
  left: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#right-arrow {
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media(max-width:350px) {
  #page-body {
    width: 100%;
  }
  #left-arrow {
    left: 0px;
  }
  #right-arrow {
    right: 0px;
  }
}

JavaScript

$(document).ready(function() {
  let currentPosition = 0;
  const marginItemsSlide = 5;
  let itemsShow = 3;
  let itemWidth;
  let totalItems;

  // Reusable function to set up carousel dimensions
  function initCarousel() {
    const pageBody = $('#page-body').width();
    const calcWidthContainer = ((itemsShow * marginItemsSlide) + pageBody) - marginItemsSlide;
    
    $(".container-slide").css('max-width', calcWidthContainer);
    $(".container-slide ul > li").css('width', pageBody / itemsShow);
    $(".container-slide ul > li").css({marginRight: marginItemsSlide + 'px'});
    
    itemWidth = $('.container-slide ul > li').outerWidth(true);
    totalItems = $('.container-slide ul > li').length;
    
    const totalUlWidth = (itemWidth * totalItems) + marginItemsSlide;
    $('.container-slide-overflow > ul').css('width', totalUlWidth);
    
    // Reset position to avoid misalignment after resize
    currentPosition = 0;
    $('.container-slide-overflow > ul').css('left', currentPosition + 'px');
  }

  // Right arrow click handler: slide left one item
  $('#right-arrow').on('click', function() {
    currentPosition -= itemWidth;
    // Wrap around to first slide when reaching the end
    if (currentPosition < -(totalItems - itemsShow) * itemWidth) {
      currentPosition = 0;
    }
    $('.container-slide-overflow > ul').css('left', currentPosition + 'px');
  });

  // Left arrow click handler: slide right one item
  $('#left-arrow').on('click', function() {
    currentPosition += itemWidth;
    // Wrap around to last slide when reaching the start
    if (currentPosition > 0) {
      currentPosition = -(totalItems - itemsShow) * itemWidth;
    }
    $('.container-slide-overflow > ul').css('left', currentPosition + 'px');
  });

  // Initialize carousel on page load
  initCarousel();

  // Update carousel dimensions on window resize
  $(window).resize(function() {
    initCarousel();
  });
});

How It Works: #

1. Initialization: The initCarousel function handles all dimension calculations (item width, container width, total list width) and resets the carousel position to ensure alignment.
2. Right Arrow: When clicked, the carousel slides left by one full item width. If we've reached the last visible set of items, it jumps back to the first slide.
3. Left Arrow: When clicked, the carousel slides right by one full item width. If we're back at the starting position, it jumps to the last visible set of items.
4. Smooth Animation: The CSS transition property on the <ul> makes slide movements smooth instead of abrupt.

For the responsive enhancement (adjusting the number of visible items on smaller screens), you could modify the itemsShow variable inside initCarousel based on window width—something you can tackle later as you mentioned.

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