Skip to content

Instantly share code, notes, and snippets.

@luisgagocasas
Created December 4, 2018 17:13
Show Gist options
  • Save luisgagocasas/6b8964db2cb586b28f3583f810d73ec2 to your computer and use it in GitHub Desktop.
Save luisgagocasas/6b8964db2cb586b28f3583f810d73ec2 to your computer and use it in GitHub Desktop.
Bootstrap 4 carousel making dynamic with PHP
<section class="slider-advisory">
<div class="container p-0">
@php
$wp_query = new WP_Query(
array(
'post_type' => 'advisory',
'post_status' => 'publish',
'posts_per_page' => -1
)
);
$numb = 1;
$flag = 1;
$max_item = 4;
$max_post = $wp_query->post_count;
@endphp
@if ($wp_query->have_posts())
<div
id="slider-advisory-container"
class="carousel slide"
data-ride="carousel"
data-interval="6000">
<div class="carousel-inner">
@while($wp_query->have_posts()) @php $wp_query->the_post() @endphp
@if($numb == 1)
<div class="carousel-item{{ $flag == 1 ? ' active' : '' }}">
<div class="row">
<div class="col-3">
<div class="block-advisory">
<div class="photo-thumbnails text-center">
{{ the_post_thumbnail('post-thumbnails') }}
</div>
<div class="advisory-description">
<h5 class="text-center text-title">{{ the_title() }}</h5>
<div class="text-description text-center">
{{ the_content() }}
</div>
<div class="text-center">
<a href="{{ get_permalink() }}" class="read-more">VER MÁS</a>
</div>
</div>
</div>
</div>
@elseif($numb == $max_item)
<div class="col-3">
<div class="block-advisory">
<div class="photo-thumbnails text-center">
{{ the_post_thumbnail('post-thumbnails') }}
</div>
<div class="advisory-description">
<h5 class="text-center text-title">{{ the_title() }}</h5>
<div class="text-description text-center">
{{ the_content() }}
</div>
<div class="text-center">
<a href="{{ get_permalink() }}" class="read-more">VER MÁS</a>
</div>
</div>
</div>
</div>
@php $numb = 0 @endphp
</div>
</div>
@else
<div class="col-3">
<div class="block-advisory">
<div class="photo-thumbnails text-center">
{{ the_post_thumbnail('post-thumbnails') }}
</div>
<div class="advisory-description">
<h5 class="text-center text-title">{{ the_title() }}</h5>
<div class="text-description text-center">
{{ the_content() }}
</div>
<div class="text-center">
<a href="{{ get_permalink() }}" class="read-more">VER MÁS</a>
</div>
</div>
</div>
</div>
@endif
@php
$numb++;
$flag++;
@endphp
@endwhile
@if($numb > 1 && $numb < 4)
</div>
</div>
@elseif($numb == 1)
</div>
@elseif($numb == 4)
</div>
</div>
@endif
</div>
<a class="carousel-control-prev" href="#slider-advisory-container" 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="#slider-advisory-container" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
@php
wp_reset_postdata();
@endphp
@else
<p>Lo sentimos, ninguna entrada.</p>
@endif
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment