javascript - 幻灯片放映到下拉列表

Question

我遇到了一个我正在处理的小问题。

我想将轮播文件 slider 转换为普通的两列菜单。

这是当前模板:

我希望它看起来像这样:

这是 Javascript 代码:

function getOneDriveFiles(){
	//PnP call here

	$pnp.setup({
		baseUrl: "BASE URL"
	});

	$pnp.sp.web.getFolderByServerRelativeUrl("FOLDER TO GRAB FILES").files.orderBy("Name").get().then(function(f){
		console.log(f);

		var files = '';

		$.each(f, function(index, value){
			var filesHtml = "<div class='file'>" + 
							"<a href='" + value.ServerRelativeUrl + "'><img  src='IMAGE URL' /></a>" + 
							"<a href='" + value.ServerRelativeUrl + "'><p id='fileTitle'>" + value.Name + "</p></a>" + 
							"</div></div>";
			
			files = files + filesHtml;
		});

		$(".files").append(files);

		/*$('.files').slick({
			dots: true,
			infinite: true,
			speed: 300,
			slidesToShow: 5,
			slidesToScroll: 5,
			prevArrow:"<img class='a-left control-c prev slick-prev' src='//fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/PublishingImages/prev_new.png'>",
      nextArrow:"<img class='a-right control-c next slick-next' src='//fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/PublishingImages/next_new.png'>",
			responsive: [
			{
				breakpoint: 1024,
				settings: {
				slidesToShow: 3,
				slidesToScroll: 3,
				infinite: true,
				dots: true
				}
			},
			{
				breakpoint: 600,
				settings: {
				slidesToShow: 2,
				slidesToScroll: 2
				}
			},
			{
				breakpoint: 480,
				settings: {
				slidesToShow: 1,
				slidesToScroll: 1
				}
			}
			]
		});*/
	});
}

<div>
<div class="files">
  /*    Blank   */
</div>
</div>
<script type="text/javascript" src="/publiccdnlib/apps/O365-Slider/o365FileSlide.js"></script>

Answer 1

您可以使用 rows 设置。

$(document).ready(function() {
  getAndAddFiles();

  $("#slider").slick({
    rows: 2,
    slidesPerRow: 2
  });
});

function getAndAddFiles() {
  var files = ['1.docx', '2.docx', '3.docx', '4.docx', '5.docx', '6.docx', '7.docx', '8.docx'];

  files.forEach(function(e) {
    $('#slider').append('<div class="file"><div class="inner">' + e + '</div></div>');
  });
};

html,
body {
  height: 100%;
}

body {
  background-color: #333;
}

.wrapper {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper #slider {
  width: 200px;
}

.wrapper #slider .file .inner {
  background-color: #13f1fc;
  text-align: center;
  line-height: 90px;
  margin: 5px;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="wrapper">
  <div id="slider"></div>
</div>