Is it possible to have a container that scrolls horizontally?
I am using JqxGrid and i am finding that the grid’s horizontal scrolling is quite slow and i’m hoping to try this from within a container instead by making the grid’s width large.
Yeah. You create a div as the outer container and then each block you want to display and scroll is the inner container.
Attach a swipe handler to the outer div, hide the currently displayed inner div and slide in the new div.
By maintaining a head, tail and current pointer you can make the scrolling virtual… when you get to the tail (last inner div) you scroll the head (first inner div) into view. Each scroll updates the current inner div var.
You can use this for slideshow, tutorials or onboarding… same technique.
This should get you started…
$('.slides div').on("swipeleft", function () {
$(this).removeClass("active");
$(this).addClass("inactive");
// see if we wrap
if(currentSlide == totalSlides )
currentSlide = 1; // wrap to first slide
else
currentSlide++; // go to next slide
$("#slide" +currentSlide).removeClass("inactive");
$("#slide" +currentSlide).addClass("active");
});
$('.slides div').on("swiperight", function () {
$(this).removeClass("active");
$(this).addClass("inactive");
// see if we wrap (backwards)
if(currentSlide == 1 )
currentSlide = totalSlides; // wrap to last slide
else
currentSlide--; // go to previous slide
$("#slide" +currentSlide).removeClass("inactive");
$("#slide" +currentSlide).addClass("active");
});