I have a slider that works fine:
hidden link
One BIG problem though, it isn't touch screen responsive.
This is going to be a deal breaker with some clients who expect touch screen sliders given that its a common place feature of the web nowdays.
I've looked at some different solutions here:
https://stackoverflow.com/questions/21349984/how-to-make-bootstrap-carousel-slider-use-mobile-left-right-swipe
And this seems promising since it doesnt require any additional libraries (if I am reading correctly)
$(".carousel").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 5 ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -5 ){
$(this).carousel('prev');
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});
But I dont understand how to implement it with my View.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<tr>
<td id="one" width="49.99%">
[wpv-post-body view_template="loop-item-in-featured-vehicles"]
</td>
[wpv-item index=other]
<td id="two">
[wpv-post-body view_template="loop-item-in-featured-vehicles"]
</td>
[wpv-item index=2]
<td id="three" width="49.99%">
[wpv-post-body view_template="loop-item-in-featured-vehicles"]
</td>
</tr>
[wpv-item index=pad]
<td id="four"></td>
[wpv-item index=pad-last]
<td id="five"></td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Hi, the short answer is this code won't work with Views Sliders because it's designed to be used with a Bootstrap Carousel. The infrastructure for a Views Slider and a Bootstrap Carousel are quite different, and this code is written specifically for Bootstrap Carousel. So if you wanted to use this JavaScript code you would have to remove all the special slider elements from your View like pagination, navigation, and effects. Then you would have to modify the loop code to generate the structure of a Bootstrap Carousel. There's documentation available here: https://getbootstrap.com/docs/3.3/javascript/#carousel
It's a rather custom implementation, so it's not something I can whip up for you here in the support forums.
OK. You can close the ticket.
I'll have to look at other ways to achieve this, I guess.
fyi I think a "touch screen responsive" Views Slider should be HIGH on the ToolSet feature request list.
As I mentioned, it could be a deal breaker for some clients.
It's border-line unprofessional in a mobile web era to NOT have touch screen enabled functionality.
cheers.
