【问题标题】:Problems with twitter bootstrap carousel control?twitter 引导轮播控件的问题?
【发布时间】:2014-08-15 21:16:40
【问题描述】:

我正在尝试做的是通过连接到数据库、从该数据库拍摄照片并用这些图像填​​充轮播来在 Twitter Bootstrap Carousel 控件中动态创建幻灯片。出于某种原因,我正在处理的轮播不会滑动。我的代码有什么问题吗?

<div id="myCarousel" class="carousel slide" data-interval="false">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <%
            rs = stmt.executeQuery("SELECT IMG_NAME FROM IMAGES WHERE IMG_NAME LIKE 'Material%'");

            ResultSetMetaData rsmd = rs.getMetaData();

            while (rs.next()) {
                names.add(rs.getString(1));
            }

            double testDouble = names.size() / 3;
            int divider = names.size() / 3;

            if (testDouble > divider) {
                divider++;

            }

            int totalSpaces = divider * 3;
            int lastBit = totalSpaces % names.size();

            for (int j = 0; j < divider + 0; j++) {
                List<String> content = new ArrayList<String>();
                if (names.size() >= 3) {
                %>
                    <div class="active item">
                <%

                for (int x = 0; x < 3; x++) {
                    content.add(names.get(x));
                    String theUrl_2 = "http://localhost:8085/assignment/GetImage?name=" + content.get(x);                                           
                %>

                <a href="<%=theUrl_2%>">                                        
                    <div class="thumbnail">
                        <div class="caption">
                            <h4>3</h4>
                        </div>
                        <img src="<%=theUrl_2%>" alt="ALT NAME">
                        <div class="caption-btm">
                            <p>kjlkj</p>
                        </div>
                    </div>
                </a>

                <%
                }
                names.remove(2);
                names.remove(1);
                names.remove(0);
                %>

    </div>

                <%
                } else {
                %>
                <div class="item">
                <%
                    for (int i = 0; i < lastBit; i++) {

                        content.add(names.get(i));
                        String theUrl = "http://localhost:8085/assignment/GetImage?name=" + content.get(i);
                %>

                    <a href="<%=theUrl%>">
                        <div class="thumbnail">
                            <div class="caption">
                                <h4>1</h4>
                            </div>
                            <img src="<%=theUrl%>" alt="ALT NAME">
                            <div class="caption-btm">
                                <p>test</p>
                            </div>
                        </div>
                    </a>

                <%
                }
                %>

                </div>

                <%
                }
            }
        %>
</div>

【问题讨论】:

  • 您是否尝试过手动调用carousel javascript$('.carousel').carousel()
  • 不,也许我会试试。

标签: java twitter-bootstrap jsp scriptlet


【解决方案1】:

发生的事情是,我将所有可能的三张图片设置为“活动项目”,或者将首先出现在轮播上的三张图片设置为“活动项目”。结果,轮播无法移动,因为从技术上讲,每组三张图片都排在第一位。我使用了一个 if 语句来测试前三张图片是否实际上是前三张图片,并将它们称为“活动项目”,而其他所有图片都作为默认集添加,这是稍后出现的。

编辑:

我用过

if (names.size() >= 3 && j == 0) //j indicates which iteration we are on, j==0 is the first, j==1 is the second, etc.

而不仅仅是

if (names.size() >=3)

【讨论】:

  • 您介意发布您所做的代码 sn-p 吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-19
  • 2015-12-25
  • 1970-01-01
相关资源
最近更新 更多