Slider Itemstyle for content editor web part

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/253955

Question

Please help me to get a good reference for Itemstyle in SharePoint

I have a simple slider with image and text, it is designed with HTML, css and js.

I would like to show this image and text from SharePoint list dynamically without using c# code!

Is it possible to use item style! If yes please let me know How?

Thanks All

Was it helpful?

Solution

We can use Bootstrap Image carousel and SharePoint REST API with jQuery Ajax to achieve it, the following example for your reference.

1.Create picture library and upload some images, add text to the Title and Comments fields.

2.Modify the "listName" in the code below to the new picture library name, and add the code into a content editor web part or script editor web part.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
    var listName="ImagesLib";
    GetImagesFromLibrary(listName);
});
function GetImagesFromLibrary(listName){
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?$select=FileRef,Title,Description&$top=5&$orderby=Created desc";
    $.ajax({
        url: requestUri,
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            $.each(data.d.results,function(i,item){
                var cInnerHtml="";
                if(i==0){
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="0" class="active"></li>');
                    cInnerHtml+='<div class="item active">';                                                            
                }else{                  
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="'+i+'"></li>');
                    cInnerHtml+='<div class="item">';               
                }
                cInnerHtml+='<img src="'+item.FileRef+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption"><h3>'+item.Title+'</h3><p>'+item.Description+'</p></div></div>';
                $("#myCarousel .carousel-inner").append(cInnerHtml);                
            });
        },
        error: function (data) {
        }
    });
}
</script>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">        
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

enter image description here

OTHER TIPS

One of the great options for displaying the slider contents from a list is using

  • The Content Search Web Part or the Search Results Web Part.

  • Custom Display Template.

    enter image description here

Sharegate introduces good articles and ready Display Template to

Just follow up the mentioned instruction and modify the display template based on your requirements.

Yes you can do it by Client side rendering. Edit the list view webpart , go to advance option , give your js code link in "js link" with tilt : for example : "~site/SiteAssets/.js"

CSR gets the JS object with raw data as input, and renders huge HTML string based on it.

you can do styling as per your requirement. Entry point of CSR API is the following function:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(options)

to add a footer : SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ Templates: { Footer: "Hello world from <#= ctx.ListTitle #>!" } });

Please go to the below thread for further references : JSLink Client-side rendering

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top