Slides display with extra and unexpected numbers of slides (Slide Loop Problem)

[Former user]

Hi, I am having a problem with the slides. I are trying to display 3 slides but it always ends it up displaying 5 slides (markup in a developer console) including 2 extra slides in between them. I don't know why 2 extra slides get inserted into the slides. Have you ever had the similar issue? Or if you have any idea why it does that? Please help. Thank you.

[Lukasz Kokoszkiewicz]

Yes, this is how it works. It adds the last slide before the first one and the first one after the last one to handle sliding loop.

[Cong Nguyen]

Thank you for replying. This makes sense now. I am working on a project that I have to inject slide <li> into the <ul>. Let say I have 3 slides in my database. they get inserted into the <ul> tag. However, for some reason, it does display 5 but the 2 slides get inserted do not match the first and the last slide. (blank1px image in the extra slides) This causes a bug in the slide. Do you have any idea what might cause this behavior?. Here is the markup. Thank you again.

<ul style="position: relative; right: 222px;">
                <li>
              <div class="slide-body" data-group="slide">
                <img src="http://dnndev.me/portals/0/slider/img/slide-3.jpg">
                <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300">
                  <h2>Custom animations</h2>
                  <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300">For any caption you use!</div>
                </div>
                <div class="caption img-jquery" data-animate="slideAppearDownToUp" data-delay="200">
                  <img src="http://dnndev.me/portals/0/slider/img/jquery.png">
                </div>
              </div>
                </li>
                       <li>
                  <div class="slide-body" data-group="slide">
                    <img src="http://dnndev.me/portals/0/slider/img/blank1px.png">
                    <div data-animate="slideAppearRightToLeft" data-delay="200" style="margin-left: 0px; margin-right: 0px; opacity: 1;">
                        <h2 style="color: #ffffff;">PreK-16 Educators, Find A Graduate-Level Online or Live Course Near You</h2>
                    </div>
                    <div data-animate="slideAppearLeftToRight" data-delay="600" style="text-align: center; margin-left: 0px; margin-right: 0px; opacity: 1;">
                        <a title="Start Course Search" id="main-filter-next" href="/courses/course-search" class="btn btn-lg btn-success centered" style="color: #ffffff;">Start Course Search</a>
                    </div>
                </div>
                </li>
                <li>
              <div class="slide-body" data-group="slide">
                <img src="http://dnndev.me/portals/0/slider/img/slide-2.jpg">
                <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300" style="opacity: 1; margin-left: 0px; margin-right: 0px;">
                  <h2>Twitter Boostrap</h2>
                  <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300" style="opacity: 1; margin-left: 0px; margin-right: 0px;">Compatible!</div>
                </div>
                <div class="caption img-bootstrap" data-animate="slideAppearDownToUp" data-delay="200" style="opacity: 1; margin-top: 0px; margin-bottom: 0px;">
                  <img src="http://dnndev.me/portals/0/slider/img/bootstrap.png">
                </div>
                <div class="caption img-twitter" data-animate="slideAppearUpToDown" style="opacity: 1; margin-top: 0px; margin-bottom: 0px;">
                  <img src="http://dnndev.me/portals/0/slider/img/twitter.png">
                </div>
              </div>
                </li>
                <li>
              <div class="slide-body" data-group="slide">
                <img src="http://dnndev.me/portals/0/slider/img/slide-3.jpg">
                <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300" style="opacity: 1; margin-left: 0px; margin-right: 0px;">
                  <h2>Custom animations</h2>
                  <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300" style="opacity: 1; margin-left: 0px; margin-right: 0px;">For any caption you use!</div>
                </div>
                <div class="caption img-jquery" data-animate="slideAppearDownToUp" data-delay="200" style="opacity: 1; margin-top: 0px; margin-bottom: 0px;">
                  <img src="http://dnndev.me/portals/0/slider/img/jquery.png">
                </div>
              </div>
                </li>
          <li>
                  <div class="slide-body" data-group="slide">
                    <img src="http://dnndev.me/portals/0/slider/img/blank1px.png">
                    <div data-animate="slideAppearRightToLeft" data-delay="200" style="opacity: 0;">
                        <h2 style="color: #ffffff;">PreK-16 Educators, Find A Graduate-Level Online or Live Course Near You</h2>
                    </div>
                    <div data-animate="slideAppearLeftToRight" data-delay="600" style="text-align: center; opacity: 0;">
                        <a title="Start Course Search" id="main-filter-next" href="/courses/course-search" class="btn btn-lg btn-success centered" style="color: #ffffff;">Start Course Search</a>
                    </div>
                </div>
                </li>
            </ul>