Yootheme pro的slideshow如何设置每张slide的内容显示位置?

Yootheme pro中自带有slideshow功能,slideshow中slide的内容,一般是指它的标题、元、描述这几样。我们可以在后台直接设置这些内容统一显示的位置,例如中下左右、左中、右中、左上,右上之类。一般位置不太讲究的话其实也可以满足了我们平常的需求。

但如果你的slideshow(幻灯片)的背景图,构图并不固定,要求每张图片配置的文字内容显示位置不一样,就不好实现,后台也没有相关的设置项,这时候我们就需要在高级的CSS区域,使用CSS代码来控制内容的显示位置,例如:

/* Slide 1: "Center Left" */
.el-item:nth-child(1) > .uk-flex {
align-items: center;
justify-content: flex-start;
}

/* Slide 2: "Top Left" */
.el-item:nth-child(2) > .uk-flex {
align-items: flex-start;
justify-content: flex-start;
}

/* Slide 3: "Bottom Right" */
.el-item:nth-child(3) > .uk-flex {
align-items: flex-end;
justify-content: flex-end;
}

/* Slide 4: "Left" */
.el-item:nth-child(4) > .uk-flex {
align-items: flex-start;
justify-content: flex-start;
}

其实这里可以这样简单地理解为

  • align-items控制内容的垂直位置,例如上、中、下;分别对应:flex-startcenterflex-end
  • justify-content控制内容的水平位置,例如左、中、右;分别对应:flex-startcenterflex-end
  • el-item:nth-child(1)这个就是指定是哪一张幻灯片,数字就是幻灯片的序号。