Horizontally scrolling Container

1

Hi,

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.

Thanks.

2

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.

3

Thanks. I will have a play around with your idea.

4

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");
  });

And the HTML is pretty simple too…

  <div class="slides">
    <div id="slide1" class="active">
      <h3>Slide 1</h3>
      <img src="img/tutorial/swipe.svg">
      <p>Say stuff</p>
    </div>
    <div id="slide2" class="inactive">
      <h3>What sounds we make</h3>
      <img src="">
      <p>Play sounds</p>
    </div>
    <div id="slide3" class="inactive">
      <h3>View Content</h3>
      <img src="">
      <p>View content by topic</p>
    </div>
    <div id="slide4" class="inactive">
      <h3>Lesson 3</h3>
      <img src="">
      <p>Add or remove slides</p>
    </div>
    <div id="slide5" class="inactive">
      <h3>Lesson 4</h3>
      <img src="">
      <p>Ipsum Lorem</p>
    </div>
    <div id="slide6" class="inactive"><h3>Lesson 5</h3><img src=""><p>Lesson 5</p></div>
    <div id="slide7" class="inactive"><h3>Lesson 6</h3><img src=""><p>We can change the tutorial titles too!</p></div>
    <div id="slide8" class="inactive"><h3>Lesson 7</h3><img src=""><p>Lesson 7</p></div>
    <div id="slide9" class="inactive"><h3>Lesson 8</h3><img src=""><p>Lesson 8</p></div>
    <div id="slide10" class="inactive">
      <h3>Congratulations!</h3>
      <img src="img/tutorial/009-applause.svg">
      <p>You have completed the tutorial.</p>
      <button id="endTutorial">Return to the home screen</button>
    </div>
  </div>