如何将简单的jquery滑块添加到Sharepoint 2010 Web部件

Question

I am trying to add the following code to the html of a sharepoint web part by clicking on "Edit HTML Source". I am using a jquery plugin from the http://unslider.com/ website. When I try to submit the code below into the sharepoint web part's html, I get the message: “the HTML source you entered might have been modified”. As a result, all I see are two bulletted lines of text. I'm fairly new to sharepoint and jquery. Is making text or picture slideshow a lot more complicated in sharepoint than the code below would suggest?

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/wg/PayrollSolutions/SiteAssets/unslider-min.js"></script>

<script>
    $(function() { 
        $('.banner').unslider() 
    })
</script>

<div class="banner”>
    <ul>
        <li>Slider 1</li>
        <li>Slider 2</li>
    </ul>
</div>

Answer 1

Indeed, when you changed manually the html of a page, SharePoint'll often change the content and the output'll not be the same.

I think this article'll help you to understand what happens and what's your option : http://sharepoint.hannahswain.eu/2014/10/10/adding-a-code-snippet-to-page-content-on-sharepoint-2013/

The Embedded command and the text file should help you.

Answer 2

SharePoint will usually clean out any JavaScript added directly into the source of a content editor web part (although it'll leave in HTML and CSS).

Instead of adding the JavaScript directly into the source of a content editor web part, save it into a text file and upload it to a library on your site.

Then, in your content editor web part, click the drop-down in the corner and choose the option to edit the web part properties. The properties panel should appear on the side of the screen.

In the "Content Link" field in the web part properties, enter the URL of your uploaded text file. The content editor web part will then render whatever's in that text file, including HTML, CSS, and (most importantly) JavaScript.

This has the added benefit of allowing you to use the same snippet of HTML/JS on multiple pages. If you need to make changes, you can change the contents of that file without having to edit the page(s) again.