For what it's worth, my 'formula' for creating a slider (I'll attach an image of what it looks like) is the following. The classes are from a section of a site I'm lifting this from. Change to suit:
In the Filter HTML section:
[wpv-filter-start hide="false"] [wpv-filter-controls][/wpv-filter-controls] [wpv-pagination] [wpv-pager-next-page]<img src="LINK TO YOUR ARROWS-NEXT" class="largefashionslider-nextimage"/>[/wpv-pager-next-page] [wpv-pager-prev-page]<img src="LINK TO YOUR ARROWS-PREVIOUS" class="largefashionslider-previousimage"/>[/wpv-pager-prev-page] [/wpv-pagination] [wpv-filter-end]
In the Filter CSS section:
.largefashionslider-nextimage {
position:absolute;
top:45%;
opacity:0.5;
border:none;
box-shadow:none;
right:-4px;
z-index: 100;
}
.largefashionslider-nextimage:hover {opacity:0.7;}
.largefashionslider-previousimage {
position:absolute;
top:45%;
opacity:0.5;
border:none;
box-shadow:none;
left:-5px;
z-index: 100;
}
.largefashionslider-previousimage:hover {opacity:0.7;}
Layout HTML:
[wpv-layout-start] [wpv-posts-found] <!-- wpv-loop-start --> <wpv-loop> <div class="largefashionslider_picturebox"><a href="[wpv-post-url]">[types field="featured-front-page-picture" width="640" height="250"][/types]</a> <div class="largefashionslider_overlaybox"> <div class="largefashionslider_titleofpicturepost"><a class="largefashionslider_titleofpictureposth" href="[wpv-post-url]">[wpv-post-title]</a></div> </div> <!-- close out overlaybox --> </div> <!-- close out picturebox --> <div class="clearboth"></div> </wpv-loop> <!-- wpv-loop-end --> [/wpv-posts-found] [wpv-no-posts-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-posts-found] [wpv-layout-end]
Layout CSS:
/***************** Create big box to hold everything (html located in 'Fully costumize view HTML output' ********************/
.largefashionslider-outerbox {
position: relative;
height:250px;
}
/***************** Create box for the picture ********************/
.largefashionslider_picturebox {
background-color: #000;
width: 640px;
height: 250px;
position: relative;
}
/***************** Create dark overlay **********************/
.largefashionslider_overlaybox {
background-color: rgba(0,0,0,0.5);
width: 640px;
height: 36px;
position: absolute;
bottom: 0px;
}
/***************** TITLE ***********************/
.largefashionslider_titleofpicturepost {
font-family: oswald, helvetica;
font-weight: normal;
font-size: 22px;
color: white;
padding-top: 0px;
padding-left: 9px;
line-height: 1.3em;
text-overflow: ellipsis; /* will make [...] at the end */
width: 466px; /* change to your preferences */
white-space: nowrap; /* paragraph to one line */
overflow:hidden; /* older browsers */
}
.largefashionslider_titleofpictureposth {color: white;}
a.largefashionslider_titleofpictureposth:hover {color: #2794b5;}
And finally, add into the Combined Output section (The css of which is above):
<div class="largefashionslider-outerbox"> [wpv-filter-meta-html] [wpv-layout-meta-html] </div>
Email back if you need help understanding any of it.