Smart Responsive Slider on SharePoint platform

[Music] SharePoint's Matt slider will let you create impressive eye catching lively images on your existing SharePoint on-premise or office 365 site this slider lets you replace the default SharePoint slideshow work part with a much more sophisticated presentation the slider can be enabled with a board from anonymous users you can adjust the size of the slider by using the clan WordPad properties the slider comes loaded with a lot of designs we will look at a lot of some of them shortly you can even customize the slider with your own CSS ties and JavaScript now let me show you how easy it is to configure the slider there are two places you can download the slider you can either get it from starchitect ENCOM or you can get it from office 365 if you download it from office 365 you're gonna have it right here smart responsive slider so you click on it to get to the administration page when the administration page open you actually see so right now we currently have a couple of sliders created already let me go ahead and add a new slide to add a new slide you can click on the bottom on the top right hand corner or you can use the menu on the left and add slide and specify whether you want to slide to be visible or not if you want to slide to be disabled you just click the button or you you allow you to be visible but for right now we're just gonna let this particular slide visible you select a position do you want this to be the first slide the second third or if you have like several other slides you can specify it like for example let's just say this one is going to be the sixth slide all right let's specify the title for this particular slide I'm gonna type this it protects SharePoint store okay and the you are I'm just gonna put our SharePoint store as the you are so this is pretty much the URL for the bottom that when the users click on it it would direct them so for this one you can specify for this particular slide you can specify whether you want the URL to open in the same window on Oh on a new tab so I'm gonna let this one open on a new tab and the text for the button put the VESA store now and let me grab a brief description for this particular slide and just paste that right there and let me upload an email for this me I think I have a couple of slides in my machine and finally click create slide so as you can see the slide has been created and the page is pretty much gonna refresh so now let me show you how you can actually add this particular slide onto your onto your site so to add the slide to your page or whatever sub-site or a SharePoint page that you have just click the gear icon edit page and you add this particular slide show work part to your page just like any other shape on WordPad or a part so let me go ahead and insert the up part to the page and it's actually called smut responsive slider right there click Add all right so I'm gonna give him a little bit more space and say when there is to be let me just put 500 for now but you can always adjust the height if you can always adjust the height as you as you want so as you can see the slideshow loads just fine all our images are coming in so let's look at one more and there you have it so going back to the administration page so you can always preview if you don't want to go to the side you can always preview the slide the slide show live from the ministration page right there so you can see you can actually see the host like the same thing preview it before you actually launch it life for all the users in your organization to see you you can download the PDF manual on how to actually configure the slider by just clicking on the download on a PDF guide and to configure everything you go to the settings page right so the settings page you specified the slider interval you specify the color theme for your slider if you want this particular normal slider to start automatically when a user go to the page you can specify right here you can enable or disable that if you want to show the title you can enable this buddha from right here as well if you want to show description the caption as well as the animation all right so let me change let me modify the color theme I'm gonna use this particular color theme and and I'm gonna change the designers were so let's use I'm going to show you a couple of design we have several different several other designs let me just show you a couple of designs so for this one I'm going to use the left and the left animated slider design and if i refresh my page and now you see it's you I have now a different design and later on I will show you how to I feel customize the color or you can actually customize this using your own CSS hero CSS die as well as your own JavaScript alright let's look at another future actually let's look at the another design so and again as I said it comes with multiple transition and transition effects let's change the effects itself image fit let's change the effect to flip in X and let's just change the effect to flip your necks and apply our changes and you so that you can see how the actual look so if i refresh the page and there you have it slider coming in and flipping in let's look at one more you have it all right we have as I said we have a ton of designs let's look at the news highlight design all right so let me go ahead and refresh the page and the news highlight you have a menu on the you have a menu on the right hand side for navigating the slides right there and as you can see the color theme that would that would create that so you see the color take the text for the for the bottom actually correspond with the text that was specified right here so let's say right now you can see it's actually I'm a blue let's change that to red just select red and say choose update your changes and if I want if i refresh the page right now the text for the button is going to change to red as you can see for yourself and also the title change to red as well alright and as I said we have a lot more designs let me just show one at this the 3d image gallery let's see how that actually look and let me go ahead and refresh the page and as you can see the border it's actually corresponding to the color of the text that you specify so your color theme see the red border does the color theme so if I hover over this it stops and instead of becoming great instead of being gray you see the actual color I'm gonna hover over this other one see that's the effect so and one last design I'm not gonna show you all the design your modern welcome to visit codex tour and see how all the design come come together alright alright so refresh the page and this is another design that comes with thumbnails at the bottom you can hover to see the thumbnails by yourself so now the next thing I would like to show you it's actually how you can customize these particular slider using your own CSS alright so let's go ahead and I'm gonna change the title for this I'm gonna change the color for the title to be red and the color of this to be red so to customize this you can literally use you can use CSS to be able to customize that your own CSS alright so I'm gonna just use my name I'm a developer dashboard and select so this is the class is actually call caption and say ish this is pretty much for power users right h1 so I'm gonna say the color be found to be 55 alright so the type the code the title of that particular color is now red and so right now what I'm going to do is I'm gonna I just want to change the title but you can do a lot you can make a lot more change actually let's do one more thing also you see so I'm just gonna copy that I'm gonna open the CSS editor so I'm gonna open notepad all right so if I so our CSS was age one island I was each one and we set the color so set the color to be red right and let me just put the import on tag one other thing I want to change the background color for the caption area so I'm gonna just say just gonna select the whole caption and say background let's make it 0 4 6 5 and as you can see the background color is now that it's now blue all right so let me copy that particular CSS code just gonna copy that and bring it into my thigh right there so I'm gonna save this file so I'm gonna save it to my computer and just upload that look for a temp temp or a photo to save that [Applause] okay smart slider demo dot CSS so what I'm going to do now is I'm going to our site asset and now upload this particular Phi our CSS file tanga saved and temp folder okay all right we have our five right there so if I open that and just grab this particular link the link to the file so what I'm going to do is go into our slide our administration page and weighs ad so right here you can add CSS as well as JavaScript so if you want if you have your own custom JavaScript that you want to use to modify the day tomorrow face mask later you just paste the writer custom CSS you pasty right there so let me go ahead and tell this our custom CSS file that we just created and say update script now if i refresh the page you see that the title changes to this and the background changes to this and this is because of the new CSS script I just added and this apply this applied to all the slides as well so it is - sorry - Auto template so if I select a different template let's select this or the template right here that's like a template that we haven't seen before so let's say like yeah that's like enough this other one it doesn't matter let's select this one all right so even if i refresh i select a template my CSS is still gonna kick in as you can see the bar garner is still blue the color is red and all that so my CSS is thickening alright so that's just a quick demo on how to actually apply your own style sheet to apply that you go to the settings click on add script I enter the script I if you have JavaScript and I right there and you can use that to customize it so we have a quick help link that actually have a video presentation on how you can actually customize your slider alright you have some brief information about it all the futures for this particular slider and if you we do actually appreciate feedback if you have any feedback you can always click there to contact to leave us a feedback if you're very satisfied or you're very dissatisfied please always let us know all right if you have any issues with a slider you can always contact support we generally respond within to the minute you color you have any issue send us an email within 30 minutes we'll get back to you and make sure that we have it up and running for you as soon as possible alright thank you so much for watching our presentation today again if you have any questions if you wanna email us you can always send us an email at info at Kotak i NC calm again it's info at otech i and c-calm thank you so much for watching

Channel: Cotek Systems, Inc.

Views: 1,726

Rating: 5 out of 5

Keywords: SharePoint, Responsive, Banner, Slider, Smart slider, SharePoint Slider, SharePoint responsive, SharePoint Responsive slider, Responsive slider, Slideshow, app, add-in, SharePoint app, SharePoint add-in, webpart, SharePoint webpart, web part, Slider app, Slider add-in, Bright banner, Cotek, Cotek Systems, Free SharePoint, howto, Smart responsive slider, branding, SharePoint branding, SharePoint slideshow webpart, SharePoint slideshow add-in, SharePoint slideshow app, Sharepoint mobile

Id: 98Iju_UcU0k

Length: 18min 54sec (1134 seconds)

Published: Mon Apr 24 2017