如何创建一个Bootstrap滑块来展示最近的博客文章?

时间:2016-12-29 19:07:35

标签: css wordpress twitter-bootstrap

我想为最近的博客文章创建一个三滑块滑块。

我有一个Bootstrap静态主页和一个管理其余页面和博客的Wordpress博客网站。

从长远来看,我的计划是在Bootstrap上构建整个站点,但目前,主页将链接到站点的其余部分。

我想建立一个"最近的博客文章"主页的部分,但是我们还没有弄清楚如何设置我想要的滑块。

| - 幻灯片1 - | - 幻灯片2 - | - 幻灯片3 - |

这些幻灯片应该:

  1. 从左向右水平滑动
  2. 可点击http://www.modernanimal.co/blog
  3. 上的博文
  4. 成为最近的三篇帖子,并在添加新帖子后进行更新
  5. 我花了很多时间在线研究解决方案。但是我还没有看到任何现场的例子,所以基于有限的知识/技能,我很难知道我到底发生了什么。

    我真的可以使用HTML代码片段来帮助我入门,也可以建议一个可以提供帮助的教程。

    提前致谢。

3 个答案:

答案 0 :(得分:1)

如果您不介意将jQuery添加为依赖项,那么 Owl Carousel 似乎可以满足您的需求。

它主要针对幻灯片,但也适用于常规内容,特别是这个例子:

https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

答案 1 :(得分:0)

有很多方法可以做到这一点,在WordPress中有很多插件可用,或者你可以手动再做..

以下是使用bootstrap创建“Recent Blog Post”滑块的一些链接。

  1. https://www.lyrathemes.com/bootstrap-carousel-tutorial/
  2. https://colorlabsproject.com/blog/create-wordpress-featured-post-carousel-using-plugins-coding/
  3. http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
  4. https://wordpress.org/plugins/recent-posts-slider/screenshots/
  5. 我希望它对你有所帮助。

答案 2 :(得分:0)

我在front-page.php中为Bootstrap 4使用了此方法:

TS5023: Unknown compiler option 'preserveWhitespaces'.

我使用了下面的教程,并做了一些修改,因为我不想使用大缩略图或标题作为标题。

https://benkaminski.com/web-development-blog/tutorial-wordpress-loop-bootstrap-4-carousel-automation/