Scenario: I have been tasked with showing SharePoint list items on a webpage with ability for users to slide 2 items at a time with right and left arrow as below
Solution: I have used jQuery plugin bxslider that can be found at:-
http://bxslider.com/
Download the plugin and place required contents (CSS, JS and image files) in StyleLibrary
and below code does the trick.
Also, modify the jquery.bxslider.css file as below:-
1. Find ".bx-wrapper img" modify it to ".bx-wrapper div"
2. Find
.bx-wrapper .bx-prev {
left: 10px;
background: url(controls.png) no-repeat 0 -32px;
}
modify the relative path of "url(controls.png)" as per your environment.
You can also use another Carousel plugin jCarousel:-
http://sorgalla.com/jcarousel/examples/
Also when Styling UI FontAwesome might be handy:-
http://fortawesome.github.io/Font-Awesome/
We can refer the font awesome CDN as below:-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/CSS/font-awesome.min.css" type="text/css" />
Or we can place the fontawesome.min.css file and supporting fonts/images to style library.