李列表轮播位置变化

时间:2018-01-19 11:02:25

标签: javascript jquery jcarousel

键入文本输入右侧的重叠幻灯片,并提供足够的文本以使轮播移动到中间 它将移动,以便第一张幻灯片从左侧离开屏幕,

在轮播行为不正确之后,意识到这是一个特定于浏览器的问题。有什么好主意的吗?

<div class="jcarousel-wrapper">

  <!-- Carousel -->
  <div class="jcarousel">
    <ul>
      <li>1<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>2<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>3<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>4<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>5<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>6<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg" width="150" height="100" alt=""><br><input type="text"></li>
    </ul>
  </div>

  <!-- Prev/next controls -->
  <a href="#" class="jcarousel-control-prev">&lsaquo; Prev</a>
  <a href="#" class="jcarousel-control-next">Next &rsaquo;</a>

  <!-- Pagination -->
  <p class="jcarousel-pagination">
    <!-- Pagination items will be generated in here -->
  </p>

</div>

JS fiddle attached, please play around the issue.

重现的步骤。

  1. 加载caousel后
  2. 你应该看到文字输入(最右边图像的底部)重叠到最右边
  3. 点击文字输入(最右边图片的底部)并开始输入。
  4. 一旦到达右侧,旋转木马就会移到中间位置。
  5. 现在尝试使用“next”和“pre”
  6. 进行导航
  7. 轮播的行为不正确

0 个答案:

没有答案