I have a problem I would like to create a slide show based on Bootstrap, and I found a few different solutions, but none work, despite trying to fix myself but failed, I do not know if the problem is that the Bootstrap version has changed or because of some another problem, I would ask for contact and possible help in the repair, so for the information I am currently using version 4.3.1

Here is a code wich i take from here:

        <div class="col-lg-8 col-xl-8 col-md-12 col-sm-12">

            <div class="title-main-page">
                <h2><a href="">LATEST FEATURES</a></h2>
            </div>

               <!-- slider start  -->
               <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                  <li data-target="#myCarousel" data-slide-to="4"></li>
                </ol>
              <div class="carousel-inner">
              <?php query_posts('post_type=post&showposts=1'); ?>
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="active item">
                  <?php the_post_thumbnail('', array('class' => 'main-home')); ?>
                </div>
              <?php endwhile; endif; ?>
              <?php wp_reset_query(); ?>

              <?php query_posts('post_type=post&showposts=4&offset=1'); ?>
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="item">
                  <?php the_post_thumbnail('', array('class' => 'main-home')); ?>
                </div>
              <?php endwhile; endif; ?>
              </div>
            </div>
            <?php wp_reset_query(); ?>
          </div>
        </div>
        <script>
          $('.carousel').carousel({
              interval: 4000
              })
        </script>
         <!-- slider end -->

        </div>
    </div> 

But it's looks like that

I have a problem I would like to create a slide show based on Bootstrap, and I found a few different solutions, but none work, despite trying to fix myself but failed, I do not know if the problem is that the Bootstrap version has changed or because of some another problem, I would ask for contact and possible help in the repair, so for the information I am currently using version 4.3.1

Here is a code wich i take from here: https://gist.github/jdcauley/5673535

        <div class="col-lg-8 col-xl-8 col-md-12 col-sm-12">

            <div class="title-main-page">
                <h2><a href="">LATEST FEATURES</a></h2>
            </div>

               <!-- slider start  -->
               <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                  <li data-target="#myCarousel" data-slide-to="4"></li>
                </ol>
              <div class="carousel-inner">
              <?php query_posts('post_type=post&showposts=1'); ?>
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="active item">
                  <?php the_post_thumbnail('', array('class' => 'main-home')); ?>
                </div>
              <?php endwhile; endif; ?>
              <?php wp_reset_query(); ?>

              <?php query_posts('post_type=post&showposts=4&offset=1'); ?>
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="item">
                  <?php the_post_thumbnail('', array('class' => 'main-home')); ?>
                </div>
              <?php endwhile; endif; ?>
              </div>
            </div>
            <?php wp_reset_query(); ?>
          </div>
        </div>
        <script>
          $('.carousel').carousel({
              interval: 4000
              })
        </script>
         <!-- slider end -->

        </div>
    </div> 

But it's looks like that

• wp-query
• twitter-bootstrap
• slideshow

1 Answer 1

Following is the reformatted code for your slider code. Instead of two custom queries, only one is used for rendering items. Also note that, you should always avoid query_posts, use WP_Query instead. $the_query->current_post is used for implementation of active class. Please check out the following example and customize it as per your requirement.

<div id="myCarousel" class="carousel slide" data-interval="1000" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active">0</li>
        <li data-target="#myCarousel" data-slide-to="1">1</li>
        <li data-target="#myCarousel" data-slide-to="2">2</li>
        <li data-target="#myCarousel" data-slide-to="3">3</li>
        <li data-target="#myCarousel" data-slide-to="4">4</li>
    </ol>
    <div class="carousel-inner">
        <?php
        $qargs = array(
            'posts_per_page'      => 5,
            'no_found_rows'       => true,
            'ignore_sticky_posts' => true,
        );
        $the_query = new WP_Query( $qargs );
        ?>
        <?php if ( $the_query->have_posts() ) : ?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
                <div class="carousel-item<?php echo esc_attr( $active_class ); ?>">
                    <?php the_post_thumbnail( 'large', array('class' => 'main-home')); ?>
                </div>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        <?php endif; ?>
    </div>
</div><!-- #myCarousel -->