رفتن به مطلب
انجمن پشتیبانی لاراول ایران
negar_a

مشکل با carousel در حالت داینامیک در لاراول

Recommended Posts

سلام دوستان . من یک سری محصولات دارم که بصورت 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>

 

Share this post


Link to post
Share on other sites

در قسمت انتهای کد $x++ رو بالا قرار دادید اون رو بیارید پایین به شکل زیر:

@php 
	$x=0
@endphp
@foreach( $product->images as  $image)
			
				<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>
	@php
		$x++ 
	@endphp
@endforeach
	

 

توی فایل blade لاراول هم تگ php رو بهتره به شکل زیر استفاده کنید البته این مورد ربطی به مشکلتون نداره

@php
	echo 'test'
@endphp

 

Share this post


Link to post
Share on other sites

وارد این گفتگو شوید

میتوانید پیام خود را ارسال کنید و بعد ثبت نام نمایید. در صورتی که حساب کاربری دارید, هم اکنون وارد شوید و در این گفتگو شرکت کنید.

مهمان
پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  Only 75 emoji are allowed.

×   لینک شما به صورت اتوماتیک جایگذاری شد.   نمایش به عنوان یک لینک به جای

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • جدید...