javascript - 有没有办法在响应式幻灯片照片库的末尾添加文本内容?

标签 javascript wordpress css responsive-design slideshow

我正在 Wordpress 上开发一个网站,我正在尝试弄清楚如何在幻灯片放映结束时添加文本以使网站更简单。本站帖子有正是我要https://hypebeast.com/2017/7/calvin-klein-flagship-makeover

我尝试“查看源代码”幻灯片,但没有成功。我想要完全相同样式的幻灯片。

有人能帮忙吗?

最佳答案

您提供的第一个示例采用无序列表元素 <ul> , 并将其转换为幻灯片。此示例使用名为 "FlexSlider" 的插件.这是 FlexSlider 的一个实现,带有一个“文本”页面作为我一起破解的最后一张幻灯片:

<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" />
    </li>
    <li>
      <img src="https://static.pexels.com/photos/230629/pexels-photo-230629.jpeg" />
    </li>
    <li>
      <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" />
    </li>

    <li class="slide related-posts-slide hidden-md hidden-sm hidden-xs flex-active-slide">
        <div class="col-xs-12">
            <p>You can put all of your content here, and treat it as it's own page.</p>
        </div>
    </li>
  </ul>
</div>
</body>
</html>

关于javascript - 有没有办法在响应式幻灯片照片库的末尾添加文本内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45421598/

相关文章:

php - 如何借助wordpress中的wp-config文件获取mysql数据库数据

php - 从 Wordpress 中删除后删除插件数据

javascript - Gatsby WordPress Source - 灵活的内容布局在不使用时被 graphql 忽略

css - 自定义输入 [类型 ="submit"] 样式不适用于 jquerymobile 按钮

javascript - 从 JavaScript 中的类实例动态继承

javascript - 函数中的 JS 简单函数不起作用

javascript - 平滑多边形边缘的算法

html - <li> 带箭头的步骤

jquery - 如何根据前一个兄弟后代的类来选择元素

javascript - 如何让javascript回调函数先执行?