Question

我想在滑块中显示多个图像。我尝试了一些代码，但没有奏效。

控制器：

public function showProductDetails($product_id)
    {
        $product = Product::where(['id' => $product_id])->first();

        $product_images=ProductImages::where(['product_id' => $product_id])->get();

        return view('front.product_details',compact('product','product_images'));
    }

刀片文件：

    <div class="col-lg-7 col-xs-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
            <div class="carousel-inner">
                @foreach($product_images as $result)
                    <div class="item active">
                       <div class="col-xs-4">
                            <a href="#1"><img src="<?php echo asset("images/products/$result->product_image") ?>" class="img-responsive"></a>
                        </div>
                    </div>
                  @endforeach

                  <!--  Example item end -->
             </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
</div>

JS档案：

$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

图像被查看但不完美..图像是这样的：

请帮我解决这个问题..

Answer 1

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    
    <!-- Items -->
    <div class="carousel-inner">
        
        <div class="item active">
            <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
        </div>
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
        </div>
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
        </div>
    </div> 
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

＆＃13;

Answer 2

试试这个

 <div class="col-lg-7 col-xs-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
            <div class="carousel-inner">
                @foreach($product_images as $result)
                    <?php $class = $loop->first ? 'item active': 'item'; ?> 

                    <div class="{{$class}}">
                       <div class="col-xs-4">
                            <a href="#1"><img src="{{ asset('images/products/'.$result->product_image)}}" class="img-responsive"></a>
                        </div>
                    </div>
                  @endforeach

                  <!--  Example item end -->
             </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
</div>

您已将active添加到所有项目中。这是我相信的问题。

鉴于laravel中滑块中的多个图像的错误

2 个答案: