WordPress latest posts carousel

Question

I try to get latest WordPress posts in carousel, I received no error but also no results!

Here is the code I'm using...

<div class = "jumbotron">
    <div id        = "carousel-example-generic"
         class     = "carousel slide"
         data-ride = "carousel">
        <?php
            $my_query = new WP_Query();
            $my_query -> query( 'showposts = 12' );
            $x == 0;
            $do_not_duplicate = $post -> ID;

            echo '    <ol class = "carousel-indicators">\n';

            while ( $my_query -> have_posts() ) : $my_query->the_post();

                echo '        <li data-target = \"#carousel-example-generic\" data-slide-to = "' .
                          $x .
                         '"';

                $x++;

                if( $x == 0 )
                {
                    echo ' class = \"active\"';
                }

                echo '>\n' .
                     '        </li>\n';
            endwhile;

            echo '    </ol>\n';
        ?>

        <!-- Carousel items -->
        <div class="carousel-inner">
            <?php
                $x == 0;

                while ( $my_query -> have_posts() ) : $my_query -> the_post();
            ?>

            <div class = "<?php if ( $x == 0 ){ echo 'active item';} else { echo 'item';}?>">
                <a href  = "<?php the_permalink() ?>"
                   title = "<?php the_title();?>">
                    <?php echo get_the_post_thumbnail( $id,
                                                       'sliderimg' );?>
                </a>

                <div class = "carousel-caption">
                    <a href  = "<?php the_permalink()?>"
                       rel   = "bookmark"
                       title = "Permanent Link to <?php the_title_attribute();?>">
                        <?php the_title(); ?>
                    </a>
                </div>
            </div>

            <?php
                endwhile;
            ?>
        </div>

        <!-- Carousel nav -->
        <a class      = "left carousel-control"
           data-slide = "prev"
           href       = "#carousel-example-generic">
            <span class = "glyphicon glyphicon-chevron-left">
            </span>
        </a>

        <a class = "right carousel-control"
           data-slide = "next"
           href  = "#carousel-example-generic">
            <span class = "glyphicon glyphicon-chevron-right">
            </span>
        </a>

        <?php
            wp_reset_query();
        ?>
    </div>
</div>

Here is my JS:

jQuery( document ).ready( function( $ )
                          {
                              $( '.carousel' ).carousel( {
                                                             interval : 1000
                                                         }
                                                       )
                          }
                        );

Please help me if you have any idea.

Sorry guys but here is dummy text just to this site let me post my question! My question was simple and clear I don't know what more should I say till be able to post my question!

Answer 1

first, of download this slider https://tympanus.net/codrops/2011/08/16/circular-content-carousel/ add your js and CSS files to your theme directory the in to post while loop replace this code

<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
<div class="container">
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
            <?php
            if ( have_posts() ) :

                /* Start the Loop */
                while ( have_posts() ) : the_post();
?>

                <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a></div>
                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <h4>
                                <span class="ca-quote">&ldquo;</span>
                                <span><?php the_excerpt(); ?></span>
                            </h4>
                                <a href="#" class="ca-more">more...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <h6><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p><?php the_content(); ?></p>
                                </div>
                                <ul>
                                    <li><?php the_time('F jS, Y'); ?></li>
                                    <li></li>
                                    <li><?php the_author_posts_link(); ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <?php

                endwhile;



            else :

                get_template_part( 'template-parts/post/content', 'none' );

            endif;
            ?>
            </div>
            </div>
            </div>

 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/demo.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style2.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>

        </main><!-- #main -->
    </div><!-- #primary -->

it will work like same

https://tympanus.net/Development/CircularContentCarousel/