سلام دوستان . من یک سری محصولات دارم که بصورت thumbnil و بزرگ در قالب اسلایدر نمایش داده میشه . ولی تو حلقه بخاطر وجود active با مشکل روبرو میشم.
این کد رو میخوام داینامیک کنم .
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="3.jpg" alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="1_thumb.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="2_thumb.jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="3_thumb.jpg"
class="img-fluid"></li>
</ol>
</div>
به این شکل تغییر دادم ولی مشکل داره .
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<?php $i=0; ؟>
@foreach( $product->images as $image)
<?php $i++; ?>
<div class="carousel-item <?php echo ($i==1 )?'active':'' ?>">
<img class="d-block w-100" src="{{$image_path}}" alt="First slide">
</div>
@endforeach
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<?php $x=0; ?>
@foreach( $product->images as $image)
<?php $x++;?>
<li data-target="#carousel-thumb" data-slide-to="{{$x}}" class="<?php echo ($x==1 )?'active':'' ?>"> <img class="d-block w-100" src="{{$image_path}}"></li>
@endforeach
</ol>
</div>
<!--/.Carousel Wrapper-->