liferay 轮播图例子

谁借莪１个温暖的怀抱￠ 2022-05-27 07:22 131阅读 0赞

轮播图结构

<root available-locales="zh_CN" default-locale="zh_CN">
    	<dynamic-element dataType="document-library" fieldNamespace="ddm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="ddm-documentlibrary" width="">
    		<meta-data locale="zh_CN">
    			<entry name="label">
    				<![CDATA[image]]>
    			</entry>
    			<entry name="predefinedValue">
    				<![CDATA[]]>
    			</entry>
    			<entry name="tip">
    				<![CDATA[]]>
    			</entry>
    		</meta-data>
    	</dynamic-element>
    </root>

轮播图模板

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="$themeDisplay.getPathThemeRoot()/css/swiper-4.1.6.min.css">
    	<link rel="stylesheet" href="$themeDisplay.getPathThemeRoot()/css/aui/main.css">
      <title>Document</title>
    </head>
    <body>
      <div class="mainwrapper">
    		<div class="banner">
    			<div class="swiper-container swiper-container-horizontal"  style="height: 392px;">
    			
    		
    			<div class="swiper-wrapper">
    				
    			#if (!$image.getSiblings().isEmpty())
    	#foreach ($cur_image in $image.getSiblings())
    		<div class="swiper-slide">
    		<a style="display: inline-block;width: 100%" href="#"><img style="width: 100%" src="$cur_image.getData()"/></a>
    </div>
    	
    	#end
    #end

结果

![70][]

[70]: /images/20220527/dc503954e1e74853ac55f070c5e3d0af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图

![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head>

布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 369 阅读

相关轮播图

<html> <head> <meta name="viewport" id="viewport" content="width=device-

布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 295 阅读

相关轮播图

点击左右按钮，切换图片。图片的序号也随之变化。逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位

落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 339 阅读

相关 liferay 轮播图

轮播图模板 set($interval = $timeInterval__s_.Data) set($activeIndexValue = $activeI

古城微笑少年丶/ 2022年05月27日 07:22/ 0 赞/ 157 阅读

相关 liferay 轮播图例子

轮播图结构 <root available-locales="zh_CN" default-locale="zh_CN"> <dynamic-element

谁借莪１个温暖的怀抱￠/ 2022年05月27日 07:22/ 0 赞/ 132 阅读

相关轮播图

废话不多说，直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="

淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 340 阅读

相关轮播图

本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head>

秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 529 阅读

相关轮播图

CSS样式 { margin: 0; padding: 0; list-style: none

柔情只为你懂/ 2021年11月23日 13:56/ 0 赞/ 562 阅读

相关轮播图

setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。给需要轮播的图片在js里声明一个变量以数组的类型在H

男娘i/ 2021年11月17日 06:32/ 0 赞/ 459 阅读

相关轮播图

方案1 初始化插件： slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型 html代码 <div class="fullS

末蓝、/ 2021年06月10日 20:38/ 0 赞/ 677 阅读