Question

如何使用Twitter bootstrap创建this，我在此网站https://www.crowdcontent.com/

找到了它

我甚至不知道它叫什么或如何开始

谢谢

Answer 1

不确定你对引导程序的熟悉程度，但基本上你需要：

http://getbootstrap.com/javascript/#carousel

文档非常简单，如果你想自定义外观，你可以简单地覆盖你自己的custom.css文件中的默认CSS（确保在默认的bootstrap之后包含它）。

您还可以在http://getbootstrap.com/examples/carousel/

找到完整的例子

示例的源代码应该在bootstrap源代码（docs / examples）

中

Answer 2

您提供的链接是wordpress主题，我尽力复制该样式并反映在bootstrap代码中。最后，通过使用 css 和 jQuery 的组合，我获得了成功。下面是我的相同风格的代码。

请注意，我已经使用了2个css文件，为了完美地运行轮播，你还需要包含这些文件，上面给出的链接！DOCTYPE Html。其他所有文件都是 CDN 所以你不必担心它们。

Jquery Snippet

    For Each table As DataTable In ds.Tables
        For Each row As DataRow In table.Rows
            ListBox1.Items.Add(row.Field(Of String)(0))
        Next
    Next

$(".home-solutions-nav-left").click(function() {
  $(".home-solution-items").animate({
      left: "-=250px"
    },
    10, function() {
      /* stuff to do after animation is complete */
      var length = parseInt($(".home-solution-items").css('left'));
      if (length < -1250) {
        resetLeft();
      };
    });
});

function resetLeft() {
  $(".home-solution-items").css('left', '0px');
}

$(".home-solutions-nav-right").click(function() {
  $(".home-solution-items").animate({
      left: "+=250px"
    },
    10, function() {
      /* stuff to do after animation is complete */
      var length1 = parseInt($(".home-solution-items").css('left'));
      if (length1 >= 0) {
        resetRight();
      };
    });
});

function resetRight() {
  $(".home-solution-items").css('left', '-1500px');
}

.home-solution-items {
  left: 0px;
}

如何制作水平图标轮播

2 个答案: