jq22.com 轮播图插件教程：PC 与移动端无缝适配方案

<div class="jq22-carousel">
  <div class="jq22-carousel-inner">
    <div class="jq22-item">
      <img src="image1.jpg" alt="Image 1">
    div>
    <div class="jq22-item">
      <img src="image2.jpg" alt="Image 2">
    div>
    <div class="jq22-item">
      <img src="image3.jpg" alt="Image 3">
    div>
  div>
  <div class="jq22-carousel-indicators">div>
div>

/* PC端样式 */
@media (min-width: 768px) {
  .jq22-carousel {
    width: 1200px;
    margin: 0 auto;
  }
  .jq22-carousel-inner {
    height: 400px;
  }
  .jq22-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .jq22-carousel-indicators {
    bottom: 20px;
  }
  .jq22-carousel-control {
    width: 40px;
    height: 40px;
  }
}

/* 移动端样式 */
@media (max-width: 767px) {
  .jq22-carousel {
    width: 100%;
  }
  .jq22-carousel-inner {
    height: 200px;
  }
  .jq22-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .jq22-carousel-indicators {
    bottom: 10px;
  }
  .jq22-carousel-control {
    width: 30px;
    height: 30px;
  }
}

$(document).ready(function() {
  $('.jq22-carousel').jq22Carousel({
    interval: , // 自动切换间隔时间（毫秒）
    touch: true, // 启用触摸滑动
    swipeVelocity: 0.3, // 滑动速度敏感度
    indicators: true, // 显示指示点
    controls: true // 显示左右控制按钮
  });
});