0

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.com/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 enter image description here

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.