时间戳

首页 > 解决方案 > 滑块未以正确格式显示

php - 滑块未以正确格式显示

问题描述

我是使用以下代码的显示滑块，但它不能滑动它显示为一张又一张的幻灯片图像。我将滑块图像存储在数据库中。对编码进行适当的更改。我正在使用 carousel-slider 显示滑块，但无法显示正确的格式。

<section id="slider"><!--slider-->
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="slider-carousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">

                        <li data-target="#slider-carousel" data-slide-to="0" class="active"></li>

                    </ol>

                    <div class="carousel-inner">
                         <?php 
                        $all_slider_info=DB::table('tbl_slider')->where('publication_status',1)->get();
                        ?>
                         @foreach($all_slider_info as $slider)
                        <div class="item active">
                            <div class="col-sm-6">
                                <h1><span>E</span>-SHOPPER</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                <button type="button" class="btn btn-default get">Get it now</button>
                            </div>
                            <div class="col-sm-6">
                                <img src="{{$slider->slider_image}}" class="girl img-responsive" alt="" />
                                <img src="{{$slider->slider_price_image}}"  class="pricing" alt="" />
                            </div>
                        </div>
                         @endforeach

                    </div>

                    <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>
</section><!--/slider-->

标签： phpmysqllaravelbootstrap-4

解决方案

可能的错误可能是使用了活动类。您的活动课程将添加到滑块的每张幻灯片中。所以它可能会导致问题。您的代码也缺少指标列表。根据您的代码，它将仅显示一个指示器而不是每张幻灯片

<section id="slider"><!--slider-->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div id="slider-carousel" class="carousel slide" data-ride="carousel">
                    <?php 
                    $all_slider_info=DB::table('tbl_slider')->where('publication_status',1)->get();
                    $tot = count($all_slider_info);
                    ?>

                <ol class="carousel-indicators">
                    <?php for($i=1;$<=$tot;$i++){ ?>
                        <li data-target="#slider-carousel" data-slide-to="{{$i}}" class="{{$i==1?'active':''}}"></li>
                    <?php } ?>
                </ol>

                <div class="carousel-inner">

                     @foreach($all_slider_info as $key=>$slider)
                    <div class="item {{$key==1?'active':''}}">
                        <div class="col-sm-6">
                            <h1><span>E</span>-SHOPPER</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                            <button type="button" class="btn btn-default get">Get it now</button>
                        </div>
                        <div class="col-sm-6">
                            <img src="{{$slider->slider_image}}" class="girl img-responsive" alt="" />
                            <img src="{{$slider->slider_price_image}}"  class="pricing" alt="" />
                        </div>
                    </div>
                     @endforeach

                </div>

                <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

        </div>
    </div>
</div>

推荐阅读