title: p-carousel behave unpredictable
body: <p>I have following code</p>
  <pre><code>    &lt;div class=&quot;p-offset-2 p-col-8&quot; &gt;
    &lt;p-carousel [value]=&quot;carouselBusPhoto&quot;  numVisible=&quot;1&quot; numScroll=&quot;1&quot;
                [autoplayInterval]=&quot;7000&quot; [circular]=&quot;true&quot;&gt;
      &lt;ng-template pTemplate=&quot;header&quot;&gt;
        &lt;div class=&quot;p-d-flex p-jc-center&quot;&gt;
          &lt;h2&gt;Choose the best bus for yourself&lt;/h2&gt;
        &lt;/div&gt;
  
      &lt;/ng-template&gt;
      &lt;ng-template let-photo pTemplate=&quot;item&quot;&gt;
        &lt;div class=&quot;p-d-flex p-jc-center p-ai-center&quot;&gt;
        &lt;img [src]=&quot;photo&quot; alt=&quot;&quot; style=&quot;height: 300px;object-fit: cover&quot;&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
       &lt;/p-carousel&gt;
        &lt;/div&gt;
  </code></pre>
  <hr />
  <pre><code>this.carouselBusPhoto = [
        'assets/images/home/carousel_1.jpg',
        'assets/images/home/carousel_2.jpg',
        'assets/images/home/carousel_3.jpg',
        'assets/images/home/carousel_4.jpg',
        'assets/images/home/carousel_5.jpg'
      ];
  </code></pre>
  <p>The issue is that when <code>[circular]</code> option is true it doesnt show any image when I click on next button at <code>carousel_5.jpg</code>. Also it has some issue with showing current image position at the bottom.</p>
  <p>What did I wrong?</p>