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:-

enter image description here

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

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more