有没有办法在响应式幻灯片照片库的末尾添加文本内容?
Is there a way to add text content at the end of a responsive slideshow photo gallery?
我正在 Wordpress 上开发一个网站,我正在尝试弄清楚如何在幻灯片放映结束时添加文本以使网站更简单。这个网站post有我想要的https://hypebeast.com/2017/7/calvin-klein-flagship-makeover
我尝试 "view source" 放映幻灯片,但没有成功。我想要完全相同样式的幻灯片。
有人可以帮忙吗?
您提供的第一个示例采用无序列表元素 <ul>
,并将其转换为幻灯片。此示例使用名为 "FlexSlider" 的插件。这是 FlexSlider 的实现,其中 "text" 页面是我一起破解的最后一张幻灯片:
<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>
我正在 Wordpress 上开发一个网站,我正在尝试弄清楚如何在幻灯片放映结束时添加文本以使网站更简单。这个网站post有我想要的https://hypebeast.com/2017/7/calvin-klein-flagship-makeover
我尝试 "view source" 放映幻灯片,但没有成功。我想要完全相同样式的幻灯片。
有人可以帮忙吗?
您提供的第一个示例采用无序列表元素 <ul>
,并将其转换为幻灯片。此示例使用名为 "FlexSlider" 的插件。这是 FlexSlider 的实现,其中 "text" 页面是我一起破解的最后一张幻灯片:
<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>