SharePoint Responsive Banner Slider

sharepoint responsive bana slider is an easy-to-use slider with beautiful designs the slider is highly customizable you can customize the color theme animations and transition effects as well as many more features that you can actually customize using the configuration page these adding wipes out the limitations of sharepoint slideshow work part by adding exciting new features with advanced animations ok now the fun part let's jump on the site and show you how you can configure it the process is really easy you can have your slider up and running on your intranet extranet or internet public facing side within actually less than five minutes let's see how you can actually do that alright so I'm looking at our SharePoint site on office 365 so to actually add in story up to your site or adding just click on the gear icon click site content and right here you have the app if you already downloaded the app from the SharePoint store or you downloaded the app 5 from office sorry Kotick bing calm there are two ways you can actually add it all right you click add an app and again as I said earlier if you downloaded the file from Co tech income the widow w Kotecki ENCOM uploaded to your app catalog and it's gonna be available right here and use and as you can see we already installed it up to our site the second way is going into the SharePoint store when you go into SharePoint store just click the search on the search box mmm sorry on the search box right there and search for Responsive bana slider and it's gonna come up and just install it but we already installed the app on our site so all we're gonna do is configure it alright so to configure it just click on the app icon and is gonna bring you into the administration pitch for this particular up let's just look at have a quick overview of the administration page you have the home page you have create new slide that actually shows you walk you through the whole process pretty easy you enter the title the URL and indicate if you want a particular slide to open on it's in the same window or on a new tab as well as the bottom takes the description and the order of the slide if you want it to be the first slide or the feed slide or the third slide no matter what you want click on select your file and just click create new slide we can also view your current slides as you can see we already have a couple of slide if you want to edit it you just hover over the image and the edit button it shows up and you just click Edit takes you to the edit page you can actually edit everything all right let's cancel that go back and you have the settings page the settings right here you can actually configure the slider interval and everything is in seconds you can configure the transition effect you can configure the design the title the description the caption as well as the animation you can also choose a color theme for your slider so let's create a couple of slides okay so on I have some predefined text by Google Chrome I'm just gonna select them and for this particular slide I want these to open it do you want it to open in a new tab yeah let's just say that say yes and the text for this button is going to be SHOP NOW as go to offer comments and just grab some text from the page and obviously this is our first slide actually we have a couple of slides already so let's start by deleting all of those alright so I'm gonna go over here I'm going to delete Oh everything that we currently have and we'll upload the slide all over again all right so I'm gonna delete that did that and the last one it okay go back to create a new slide all right let's select our file and this is gonna be our first slide click create and there you have it we have offer slide right there ok let's create a couple more this one wanted to open we don't want it to open in a new tab and the text for this one is just going to be C futures let's put futures all right description really doesn't matter leave it like that create a new slide do the same thing this one's gonna be slightly different and we're gonna grab description from next SharePoint comm just gonna grab some temp for text this is just for demo purpose okay this is gonna be our third slide just like an image do the same thing for fourth one yes he admin support does Marv leave the text like that create mmm this is our store now so let's see how much light we have so far where I want to do our five slides alright let's just do one last one okay one last quick slide the button for this one's going to be enter now this is a six one nice okay we have our slide all right so let's return to the site and actually see how what happened when you actually add the slider again as I said this is an up part right so you add it to your page as an upper let's see how you can do that so I'm gonna edit the page click the gear icon click Edit alright so I'm gonna click insert again apart and select responsive banner slider click Add so by default you're gonna have just some color background and default text just popping in alright so this is what you get by default bird this is because we haven't published our changes we created the site the slide but we haven't published our changes so it's very very important guys after you create your slide actually after every single change you make from the administration page make sure you publish your changes so that it appears for everybody to be able to see all right so let's go back and actually publish our changes oh sorry I click edit button instead of site content so click the gear icon click site content and click burn a slider alright so the first thing I want to do is on publish my changes click publish in the changes were published successfully now this is very important it's a one-time thing so if slider so when you download the slider so you a key so whenever you add in the slider to your page the up part to your page there is a configuration that you have to insert if you don't insert that particular configuration as you can see I can refresh this page it's it's not going to show anything it's still gonna show the default color background all right you need to insert the key right here to be able to tell it that okay go ahead and load my my changes all right and this is a one-time thing so from now onward whenever you after you insert the key whenever you make any change you go back tomorrow the day after you make any change and just click publish it's just gonna automatically display right here so let's edit the page and insert our key today apart properties so click about edit webpart properties all right I'm just gonna change the chrome to none that means I just want to remove the part this particular title and I'm gonna insert the key right there click OK and there you have it now you can see your images after you insert the key the images are now coming in your tags your description everything is now coming in alright let's look at the next one actually let's click on it so we said this particular slide we said it should open in a new tab so watch I'm going to click on it the opposite in a new tab but the second one I think we said it should open in the same page so let's wait for the second slide to come or we can actually even use the navigation to actually let's use the navigation to go to the next one all right so this one is supposed to open in the same window all right as you can see it actually opens in the same window instead of opening a new tab so let's click the back button to go back all right let's look at a few more changes some other changes that is so a few more customization that you can do go back to site content responsive banner slider and let's go to the settings page and I want to configure the slider timing so I wanted to let's just say 1 it's run every 3 let's say 5 seconds all right publish changes and I'm gonna open it in a new tab or actually let me open in IE so that you can actually see that this particular I'm not I'm actually not logging but this particular slide is available to anonymous user so you can actually see that for yourself so let me refresh the patient ie and there you have it the slides coming in and you and again I am NOT logging in IE it's available to anonymous users so let's go ahead and publish the the slider interval we've changed it to 5 seconds publish that and refresh the page so now it's gonna come in a little faster alright so every 5 seconds there you go you can see for yourself every 5 seconds it pops in all right let's change the design I want to change the transition effect to flip in and the slider design to Tom now let's publish our and see how it actually look all right let's refresh our page and there you have it totally different design with thumbnails that you can actually use Amman navigate each particular slide right there all right and again it feels just like the other design the button if you click on it if you configure it that is you open in the same tab it's gonna open in the same tab another thing that we can also configure is the slider interval all right so let's look at that sorry um the slider order so let's view our slides so currently we have this guy as our first I was our first slide right so we won the huge giant clock to be our first slide and we want this guy to be our third slide click save slight changes all right and again as I always say you definitely want to go ahead and publish your changes all right so now if we refresh the page we will revert back to the default design and this big giant clock which is currently the fifth is gonna be now the first slide so let's refresh the page and there you have it the big giant clock is now the very first slide all right and it's actually flipping in as an X there you have it so another thing you can actually do is you can actually call a mark customize the color theme so let's change the color to something red the color theme of your slides to something red save slight changes let's refresh the page and there you have it you see now the color of the button is red is reddish it looks kind of burgundy to me but yeah you get the point so it's kind of reddish in color and a different design that actually I'm a map your site so if you have the design of your site is ready for it probably want to choose the right design alright and that wraps it up for our for our demo today you can actually send us an email for if you have any questions at info at Co Tech in calm as Kotex e o te k i NC comm info at co tech income if you have any information if you if you have any issues just send us an email would definitely jump in and help you with your issues thank you so much bye

Channel: Cotek Systems, Inc.

Views: 17,878

Rating: 5 out of 5

Keywords: SharePoint, Responsive, Banner, Slider, SharePoint Slider, SharePoint Responsive Banner, SharePoint Responsive Banner Slider, Slide show, Slide, Slideshow, howto, App, add-ins, SharePoint app, SharePoint add-in, SharePoint Slider App, SharePoint Slider Add-in, Bright, BrightBanner, Cotek, Cotek systems, Cotek Systems Inc, Free SharePoint, Free SharePoint Apps, Free SharePoint Add-ins, Free

Id: P5uMjozG29k

Length: 16min 7sec (967 seconds)

Published: Tue Oct 11 2016