Owl Carousel图片滑块每行4本图书展示及分页功能实现问题咨询

问题根源 #

1. 原有循环逻辑错误：仅在$i%3==1和$i%3==0时输出图书，会丢失1/3的图书数据，且没有按4本/行的规则做分组
2. 未正确配置Owl Carousel滑块参数，导致所有内容挤在同一行
3. 没有做分页查询逻辑，会一次性加载所有图书数据，页面性能差

修复后的完整代码 #

<html>
<head>
<!-- 提前引入Owl Carousel依赖的CSS、JS以及jQuery -->
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owl.carousel.min.js"></script>
<style>
/* 固定图书项宽度，保证每行刚好放4个 */
.single_cause {
    width: 23%;
    margin: 1%;
    float: left;
}
.pagination {
    margin-top: 20px;
    text-align: center;
}
.pagination button {
    padding: 8px 15px;
    margin: 0 5px;
    cursor: pointer;
}
.pagination button.active {
    background: #007bff;
    color: #fff;
    border: none;
}
</style>
</head>
<body>
    <div class="popular_causes_area section_padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="causes_active owl-carousel">
                        <?php
                        try {
                            require('connection.php');
                            // 分页配置：每页7行*4本=28本
                            $perPage = 28;
                            $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
                            $offset = ($page - 1) * $perPage;
                            
                            // 查询总图书数计算总页数
                            $countSql = "SELECT COUNT(*) FROM books";
                            $countRs = $db->query($countSql);
                            $totalBooks = $countRs->fetchColumn();
                            $totalPages = ceil($totalBooks / $perPage);
                            
                            // 分页查询当前页的图书数据
                            $sql1 = "SELECT * FROM books LIMIT $offset, $perPage";
                            $rs = $db->query($sql1);
                            $db = null;
                        } catch(PDOException $ex) {
                            die ("错误信息：".$ex->getMessage());
                        }
                        
                        // 循环输出所有当前页的图书项
                        while ($books = $rs->fetch()) {
                            $bpic = $books[2];
                            $btitle = $books[3];
                            $bq = $books[4];
                            $bstatus = $books[5];
                            $bdesc = $books[6];
                            $bnumber = $books[7];
                            $bcity = $books[8];
                        ?>
                        <div class="single_cause">
                            <div class="thumb">
                                <?php if ($bpic == "") { ?>
                                    <img src='img/default-image.png' height="450px" alt="<?php echo $btitle; ?>">
                                <?php } else { ?>
                                    <img src='img/<?php echo $bpic; ?>' height="450px" alt="<?php echo $btitle; ?>">
                                <?php } ?>
                            </div>
                            <div class="causes_content">
                                <div class="balance d-flex justify-content-between align-items-center">
                                    <span>联系电话：<?php echo $bnumber; ?> </span>
                                    <span>所在城市：<?php echo $bcity; ?> </span>
                                </div>
                                <h4><?php echo $btitle; ?> </h4>
                                <p><?php echo $bdesc; ?><br>品相：<?php echo $bstatus; ?></p>
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                    <!-- 底部页码导航 -->
                    <div class="pagination">
                        <?php for ($i = 1; $i <= $totalPages; $i++) { ?>
                            <button onclick="window.location.href='?page=<?php echo $i; ?>'" <?php if ($i == $page) echo 'class="active"'; ?>><?php echo $i; ?></button>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    // 初始化Owl Carousel滑块
    $(document).ready(function(){
        $('.causes_active').owlCarousel({
            items: 4, // 每行显示4本图书
            loop: false,
            margin: 10,
            nav: true,
            dots: false
        });
    });
    </script>
</body>
</html>

额外说明 #

• 如果你不需要滑块滑动切换的效果，直接删掉Owl Carousel的初始化JS代码即可，CSS里的宽度设置已经能保证每行自动放4本，超出自动换行
• 如果需要滑块的每一页显示完整的7行28本，把Owl配置的items参数改为1，然后把每28本图书用一个容器包裹作为滑块的单个项即可
• 分页用了MySQL的LIMIT语法做数据分页，避免一次性加载所有图书拖慢页面加载速度
• 原有代码里重复的图书输出逻辑已经做了合并，减少冗余

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