Slideshow to two column list

HTML & CSS
,
1

I have come across a small issue that I’m dealing with at the moment.

I’m wanting to convert a carousel file slider into a plain two column menu.

Here is the current template:

842×173 16.7 KB

Here is what I would like it to look like:

Here is the Javascript code:

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=''>",
                        nextArrow:"<img class=''>",
			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
				}
			}
			]
		});*/
	});
}

HTML Code:

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

Sorry, but I’m a bit unclear about what you’re asking.

Your title says “drop down list”, but your image shows two columns of (presumably) icons or images.

If you don’t want to use a carousel, then just get rid of that code. Can you clarify what you want to replace it with?

2 Likes
3

I’d like to make it into a two column list, I do apologize about the confusion.

4

OK, thanks for the clarification.

What code do you have for thois so far, and where do you need help?

5

All that I currently have is the code there, and the default “files” div linkage.

I’ve commented out the coding used to make the curousel work.

I was told that the “HTML” needs to be coded inside:

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>";
6

It would be helpful if you let us know how much experience you have in coding HTML and/or CSS. Then we know how to gauge our answers, and we can help you code the section that you are wanting (but hopefully you will contribute somewhat to this also).

3 Likes
7

I don’t have too much experience in HTML/CSS - I do have a project that I need completed for school and would love some help to lead me in the right direction.

8

Is this question part of the project? And what course is the project for? If it is a web development course, we’d be happy to lead you but not to provide you with the answer.

3 Likes
9

Yes it’s for a web development project, I just need to change the curousel to just a two list column.

10

I’ve managed to cancel out the carousel and have the list just drop down.

For splitting all the items into two columns, would you use css/div’s or something else?

681×597 18.6 KB

11

How many items do you have? Is it a fixed number, or might it vary?

What should happen to the two columns at narrower screen widths?

We really need a bit more information - and the code you’re using - to offer useful advice.

1 Like
12

The ideal goal is to display two items per columns and then create new row.

So here is the goal:

Column 1 | Column 2
|
|

All the code that I have is posted above, but I will be posting it for referencing below.

.filesContainer {
	/*	margin: 25px; */   /* Spacing for "Javascript Files Heading */
		width: 100%;
		
	}

	<div class="files">
  	</div>

function getOneDriveFiles(){
	//PnP call here

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

	$pnp.sp.web.getFolderByServerRelativeUrl("FOLDER").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='//fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/PublishingImages/wordThumbSmall.png' /></a>" + 
							"<a href='" + value.ServerRelativeUrl + "'><p id='fileTitle'>" + value.Name + "</p></a>" + 
							"</div></div>";
			
			files = files + filesHtml;
		});

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

For the mobile responsiveness, I plan on adding in media query’s.

13

If you’re not using a carousel, then why do you need JavaScript here?

You can simply mark up the files as an unordered list <ul> with a link to each item.

That’s good, but we still need to know how you want the columns to behave. Two columns of two items each is going to be very small and cramped on a mobile screen. How should the layout adapt?

1 Like
14

Here is the issue, once a file is uploaded to a certain location, it gets added to that list so that’s why the JavaScript file is needed.

The goal is to display two files per row on mobile.

15

Update: Works like a charm.

… defined .file in the css file and used float: left with %'s.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.