php - Bootstrap Carousel, loop every two items -
i'm trying carousel show 2 items per slide in every loop isn't working @ moment, here code have:-
<div id="hot-jobs-carousel" class="carousel slide" data-ride="carousel"> <!-- indicators --> <ol class="carousel-indicators"> <?php if ($x == 0) { echo '<li data-target="#hot-jobs-carousel" data-slide-to="0" class="active"></li>'; } else { echo '<li data-target="#hot-jobs-carousel" data-slide-to="'.$x.'"></li>'; } ?> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <?php if ($x == 0 || $x == 1) { ?> <div class="item active"> <div class="col-md-12 row"> <a href="<?php echo get_permalink(); ?>"> <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper"> <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p> <p class="job-title"><?php echo get_the_title( $id ); ?></p> <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p> <div class="view-job <?php echo $job_sector_html; ?>-bg">view<br>this job</div> </div> </a> </div> </div> <?php } ?> <?php if ($x == 2 || $x == 3) { ?> <div class="item"> <div class="col-md-12 row"> <a href="<?php echo get_permalink(); ?>"> <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper"> <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p> <p class="job-title"><?php echo get_the_title( $id ); ?></p> <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p> <div class="view-job <?php echo $job_sector_html; ?>-bg">view<br>this job</div> </div> </a> </div> </div> <?php } ?> </div> <?php $x++; endwhile; endif; wp_reset_query(); ?> <!-- left , right controls --> <a class="left carousel-control" href="#hot-jobs-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#hot-jobs-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> at moment displaying follows , not scrolling:-
also, @ moment there 4 items, have 20 items+, how adapt code shows 2 items @ time without having specify ones want display (replacing: )
thanks in advance
you have div inside item both class row , class col-md-12, column needs inside row, help
try :
<div class="item active"> <div class="row"> <div class="col-md-12"> <a href="<?php echo get_permalink(); ?>"> <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper"> <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p> <p class="job-title"><?php echo get_the_title( $id ); ?></p> <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p> <div class="view-job <?php echo $job_sector_html; ?>-bg">view<br>this job</div> </div> </a> </div> </div> </div> <?php } ?> <?php if ($x == 2 || $x == 3) { ?> <div class="item"> <div class="row"> <div class="col-md-12"> <a href="<?php echo get_permalink(); ?>"> <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper"> <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p> <p class="job-title"><?php echo get_the_title( $id ); ?></p> <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p> <div class="view-job <?php echo $job_sector_html; ?>-bg">view<br>this job</div> </div> </a> </div> </div> </div>
Comments
Post a Comment