The Ultimate Content Slider for SharePoint

in this video I'm going to walk you through using the updated script on my blog for creating a Content slider in SharePoint back in July of 2013 I actually created another script in my blog for using this same library the Sun slider library and using SP services to create a Content slider and this was nice because it worked in 2007 2010 and 2013 but there were some limitations there and there was some confusion with how to get some of the content to work in there so I thought I would update the script I would use a newer version of unsolder a version of jQuery and then give you guys some more features so let's dive in and walk through setting up that slider so to get the source code for the updated slider I've actually put it into github so if you go to github.com slash in Rackley slash paint slider you will see the code there you will see a few main files you'll see the page slider j/s file and this is the file as of the logic in it you also see one called paint slider see ewp and this is the file that needs to go into a content editor web part in your SharePoint site I've been included the unsolder files for their style sheets and the unsolder file for the javascript file as well so you can actually download these locally or you can reference them in the CDN but I wanted to provide those files for you so that you would have them and then over in your SharePoint site what you need to do is you need to create a list to store your slides previously I sent you through a pretty long process of setting up a specific list of a specific way but I thought I would simplify simplify everything and use a promoted links list because the promoted links list has all the fields we need so it makes it much easier for you to create this slider so what you need to do is come in to your SharePoint site and you want to add an app and when you go to add an app you would want to add a promoted links list promoted links so give your list a name I'm just going to call this one promoted for this example and what you'll see when you get this new list for whatever you call it let me change the view here to the all promoted links view you can see it has a title field a background image field of description field a link location and an order and so these are the exact same fields that we're going to use for our carousels so that you can specify the image you want to be for the background of your carousel you can just put the description in there this is the content for the slide a link location for when a user goes and they click on it and the order you want the slides to appear so the one thing I do suggest you changing is to go into your list settings for this promoted links list and then go into the description field and change that to enhanced rich text field and that way you can get enhanced reg tix rich text right you can get different text colors different exercises you can stylize it a lot more if we look over at this list I already have called promoted links you can see that we have a pre-baked list already so if I change this back to that all promoted links view we see our entries in that we've got an image location we've got a description which is now rich text we've got the link it goes to and they click on it and we've got the order that they go into I also add an additional field called Department which we're going to go into later why this is kind of cool but for now let's just look at these entries so we have entries in here for five slides now the next thing you want to do is we want to take these source files from the github project and we want to put those into your site assets library so I'm going to open up my site assets library I'm going to take these files the pace letter J s and pate slider C ewp and just drag and drop these into my site assets library so those files are now uploaded now all that's left to do is to create a page drop a content editor webpart on that page and link it to the file we uploaded and our slide should work so I'm going to cite pages and I am going to add a new web part page I'm going to call this web part page pate slider and you don't have to create a new page you can drop this web part onto any existing page but for the purposes of this I'm just adding a new page and now I'm going to add a web part to that page and I'm going to add a media and content content editor web part and now I'm going to edit that web part and I'm going to point it at that file we uploaded to our site assets called pate slider CEW pjs and apply that so you can see that we now have a slider on the page and the slider is using those items from from the promoted links list we've got arrows here so you can scroll through them if you click on this slide you can see it takes you to a different page I click on a dot I can go to a specific slide you can see that we've got some different coding here on this slide so and you'll see there's a black border on this slide so this is now we get to see some of the features that I've added to this script that weren't in the previous script if we open up the file for paid slider see ewp this is the file that you'll have the ability to make some changes to in order to change the way the slider works one of the first things you'll see is there are some styles for a class called paint slide and this is nice because you can now apply a class to each one of your slides so if you want to force them to have a specific height and width you can or if you want to add a border to them you can so you can use these styles to really change and make sure that your slides are consistent with what you could not do easily in the just ahead before I also added the ability for you to override the nav navigation circles so if those dots if you want to change their color you could change the style for that and you can also override the style for those next in previous arrows in this example that out-of-the-box you see those circles over the sliders and these were actually done with styles that you can override if you don't like these circles and want to use something else some other things about this script is when you call this method you need to pass in some parameters one of them being the name of your promoted links list and in our instance is called promoted links and the new feature which I think is really cool is you pass in the the name of the view that you want to get the items for so if you only want to see specific items in a list all you have to do is create a view that shows the items you want to show and then pass in that view name here so we're telling it that we want to show all promoted links which is the name of the list that shows all the links some other options you have in here you can specify the HTML you want to display for the next and previous arrows right now I'm just doing a less-than and greater-than sign and then we have some unsolder options here we have the option to autoplay or slide to go infinite you can change the animation so instead of going a horizontal animation it can be vertical do you want to show the arrows oh not even show the dots or not do you want people pressing the keys to advance the slides and then what do you want the delay to be between the slides changing so these are all things you can go in there and tweak to get this experience for the slider to be completely the way you want so let me just show you how we can use this view title here to really change the way the sliders work so if you remember back in our list here for the promoted links we have this field called Department so what happens if I go and create a view and I just want to create a view for marketing slides so I'm going to do is I'm going to create a new view called marketing and it is going to have the same fields as are all as are all s all promoted links but I'm going to come through here and say I want to only show slides where the department is equal to marketing okay so we now have this new view called marketing and it just has these two entries in it so if I go into that file in our site assets library and I change the name of the view title from all promoted links and I change that to just marketing and save that now when we view the slider instead of having five slides we only have the two that were used for the marketing department so this allows users to create views for specific slides without having to go through and change any code or know how to code or do anything like that or change any queries to just create a view give it a name and then update that script to say use this view so that's pretty much all there is to it feel free to get in there dig around and change the styles create some views and good luck you

Channel: Mark Rackley

Views: 24,353

Rating: 4.52 out of 5

Keywords: SharePoint, Office 365, jQuery, Unslider

Id: W5Gx3DmUDhM

Length: 10min 18sec (618 seconds)

Published: Mon Nov 28 2016