Show SharePoint Lists in FlexSlider Manner

Show List Item in Flex Slider style.
Suppose you want to show List items (Mainly used to Features article) in flex slider manner like below.

We can do this by using some Jquery files and client object model.

Required files  Jquery min , jquery.flexslider.js , flexslider.CSS can  be downloaded from below location.

 https://drive.google.com/folderview?id=0B75g-_BttAvZSGpDdDM3ckpna0E&usp=sharing

<link rel="stylesheet" href="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/flexslider.css" type="text/css"/>

<script src="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/jquery.min.js"></script>

<script src="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/jquery.flexslider.js"></script>

All these files you will get it from above drive path

Following is the JS file which will fetch data and will create HTML

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getNewsforSlider);

function getNewsforSlider()

{

var  Newscontext = SP.ClientContext.get_current();

   var NewscamlQuery = new SP.CamlQuery();

var Newslist = Newscontext.get_web().get_lists().getByTitle("Trending News");

    NewscamlQuery = new SP.CamlQuery();   

    NewsspItems = Newslist.getItems(NewscamlQuery);

 NewscamlQuery.set_viewXml("<View>" +

                                "<ViewFields>" +                                       

                                       "<FieldRef Name='HomePageImageURL'/>" +                                       

                                    "<FieldRef Name='Title'/>" +    

                                     "<FieldRef Name='ID'/>" +    

"<FieldRef Name='HomePageByline'/>" + 

                                  "</ViewFields>" +

                               "<Query> <OrderBy> <FieldRef Name='Modified' Ascending='False' /> </OrderBy></Query></View>");

    Newscontext.load(NewsspItems);

    Newscontext.executeQueryAsync(Function.createDelegate(this, foodForThoughts), Function.createDelegate(this, onFail));

    }

function foodForThoughts()

{

var NewslistEnumerator = NewsspItems.getEnumerator();

    var Newsitem;

 var AlliNewstems = [];

    while (NewslistEnumerator.moveNext()) {  

Newsitem = NewslistEnumerator.get_current(); 

var divbgimage= Newsitem.get_item('HomePageImageURL');

var divbodytext= Newsitem.get_item('HomePageByline');

var divTitletext= Newsitem.get_item('Title');

var divIDText= Newsitem.get_item('ID');

AlliNewstems.push(" <li  style='background-image:url("+divbgimage +");margin:1px;'><div  class='divTitle' style='height:10% !important;'></div><div class='divbody' style='height:18% !important;'><a href='Javascript:OpenNews("+ divIDText +")'>"+ divbodytext +"</a></div></li>");

    }

  var Newscontent = "<div class='flexslider'><div style='width:100%;height:25px;' align='right'><a style='color:Black;' href=***************/SitePages/AllNews.aspx'>View ALL</a></div><div class='flexslider carousel'><ul class='slides'>" +  AlliNewstems.join() + "</ul></div></div>" ;

$('.newsDiv').append(Newscontent);

 $('.flexslider').flexslider({     animation: "",     animationLoop: false,     itemWidth: 240,     itemMargin: 3   });

}

OpenNews JS

function OpenNews(news_id){var options = {url:"/***********/DisplayNews.aspx?ID=" + news_id,

width: 850,height: 600,dialogReturnValueCallback: function(dialogResult){SP.UI.ModalDialog.RefreshPage(dialogResult)}};SP.UI.ModalDialog.showModalDialog(options);}

You can use below function to increase or decrease length of the items or height width.

$('.flexslider').flexslider({     animation: "",     animationLoop: false,     itemWidth: 240,     itemMargin: 3   });

}