php - 移动设备中图像轮播的问题

Question

我已经实现了 prettyphoto 插件来在我的网站上显示照片滑块。在桌面版本中，图像显示得很好，但在移动版本中，它并没有像我预期的那样显示。

在此图像中，您可以看到图像在移动版本中的显示方式。

我想要实现的是删除每个图像下方的下一个和上一个按钮。我想将这些按钮放在图像的左侧和右侧，并删除每个图像中显示的滑块的小版本。我尝试进行这些更改，但按钮显示不佳。

在下一张图片中，您可以看到它：

图像下方的按钮（上一个和下一个）仍然显示，并且还显示了小滑块。应该向左和向右的按钮位于错误的位置。

我只是删除了图像下方的按钮和小滑块。仅显示按钮 prev 和 next 但位于每个图像的左侧和右侧。

我拥有的css代码是这样的：

          /* Corrections to Gallery */
                                .tz-blogMasonry .tzBlogmasonry .blogMasonry-item .tz-blogInner .tz-BlogImage a.tz-ViewImage {
                                        left: 50%;
                                        margin-left: 9px;
                                    }
                                .tz-ViewDetail {
                                        display: none! important;
                                    }
                                .fa-eye:before {
                                        content: "+"! important;
                                        font-size: 20px;
                                        position: relative;
                                        top: -4px;
                                        font-weight: 600;
                                    }
                        @media (max-width: 990px){

                        .pp_left
                        {
                        background: url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat !important;
                        }

                        .pp_right {
                            background: url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat !important;
                        }

                        .tzBlogmasonry{
                            text-align: center;
                        }
                        .col-md-4{
                            display: inline-block;
                            text-align: center;
                            width: 300px;
                            margin-bottom: -30px;
                            height: 300px;
                            overflow: hidden;
                        }

                        .pp_top, .pp_right, div.pp_default .pp_top .pp_middle, .pp_left, .pp_bottom, .pp_expand, div.pp_default .pp_bottom .pp_middle {
                            background: none! important;
                        }

                        #fullResImage {
                            height: auto! important;
                            width: 100%! important;
                            max-height:  500px! important;
                        }

                        div.pp_default .pp_content {
                            background-color: none! important;
                            width: 100%! important;
                            height: 100%! important;
                        }
                        div.pp_pic_holder {
                            width: 96%! important;
                            margin-top: -40px! important;
                            max-height:  500px! important;
                            text-align: center;

                            /*added now*/
                            left: 10px !important;
                        }

                        div.pp_gallery
                        {
                            /*display: none !important;*/
                        }

                        }

这是 HTML 代码：

            <section class="tz-blogDefault">
                                        <div class="container">
                                            <div class="row" style="margin-bottom: 50px;">
                                                <div class="tz_maniva_meetup_title text-center">
                                                    <h3 class="tz_meetup_title_raleway tz_title_meetup_normal"> Wir begrüssen dich herzlich in unseren schönen Zimmern. </h3>
                                                    <div class="tz_meetup_title_content">
                                                        <p>We welcome you warmly in our beautiful rooms.</p>
                                                        <p>Vă întâmpinăm călduros în camerele noastre frumoase.</p>
                                                        <p>Szeretettel várjuk Önt gyönyörű szobáinkban.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tz-blogMasonry">
                                                <div class="tzBlogmasonry">
                                                <?php
                                                $sql = "select * from tblgallery where is_deleted = 0  order by id desc";
                                                $result = mysqli_query($connection,$sql);
                                                $num_rows = mysqli_num_rows($result); 
                                                if($num_rows > 0){  
                                                    while($row = mysqli_fetch_assoc($result)){ 
                                                ?>
                                                     <div class="blogMasonry-item col-md-4">
                                                        <div class="tz-blogInner">
                                                            <div class="tz-BlogImage">
                                                                <img src="admin/gallery/Thumbnail/<?php echo $row['renameimage']; ?>" alt="blog" style="height:200px;">
                                                                <div class="tz-ImageOverlay"></div>
                                                                <a class="tz-ViewImage" data-rel="prettyPhoto[worksGallery]" href="admin/gallery/<?php echo $row['originalname'];?>">
                                                                    <i class="fa fa-eye"></i>
                                                                </a>
                                                                <a class="tz-ViewDetail" href="#">
                                                                    <i class="fa fa-link"></i>
                                                                </a>

                                                            </div>

                                                        </div>
                                                    </div>
                                                <?php }
                                                 }
                                                 ?>    
                                                </div>
                                                <!-- <div class="wp-pagenavi">
                                                    <span class="pages">Page 1 of 2</span>
                                                    <span class="current">1</span>
                                                    <a class="page larger" href="#">2</a>
                                                    <a class="nextpostslink" href="#" rel="next">»</a>
                                                </div> -->
                                            </div>
                                        </div>

                                    </section>

标签： phpjqueryhtmlcssprettyphoto