I want to scroll all the data by slick JS. See this example
Initially it will be scrolling vertically automatically, when user want to scroll he/she will must be able to scroll all data in slider.
As in image there are 50 blocks are scrolling vertically, I want to view all blocks while scrolling down.
How can I manage this scenario with Slick
Related
hi I have a slider in revolution slider that is vertical slider and I want it work like usual page and when users scroll the page it change slides but it only changes slides when the mouse is in the slider area. And with window scrollbar doesn't do anything and stops. how can I do this? maybe some javascript code is needed or what?
I tried the scroll options in revolution slider(window,body,both) but it doesn't change
My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...
The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.
First i would describe what I'm trying to achieve:
Basically I have a simple scrollable div as a container. But once it is scrolled to the top, I want the entire div to be pan-able (eg. to swipe the container down) - when i attempt to swipe it down. But I want to retain the scrolling in the case that I swipe it upwards (scrolling downwards), it scrolls normally downwards. Check out Facebook's container element when it opens a container on their app.
I am currently using a simple div with panning from Hammer and a scrollable div, but i encounter a problem:
Once I allow the entire div to be pannable, I cannot scroll the div now.
Hence, I cannot detect whether a user is attempting to swipe down or up the div to pan and scroll the div respectively.
I am wondering what are some suggestions to approach this conflicting issue! Thank you!
So I have about 8 pages, more or less that I want the user to be able to scroll to each one horizontally. However each one of those 8 pages is also pretty long and needs a vertical scroll bar in each page as well. So when the user uses the horizontal scroll bar they should be able to navigate the different pages, but when using the vertical scroll bar they should be able to just scroll up and down on the page that they're viewing.
I looked at at fullpage.js and sly.js and I'm not really sure which one would be the best to achieve this kind of design. Also if anyone has any other suggestions on how to do this that'd be great too.
If you go for fullpage.js, it doesn't provide any horizontal scroll bar. You can scroll horizontally form one slide to another by using the keyboard arrows or by using any visual element in your site.
fullpage.js provides arrows by default to do so. But you can substitute them for any other element.
Then you can use the option scrollOverflow:true to allow the vertical scrolling within the slides.
I've recently implemented flexslider for a full screen slideshow effect.
www.ianandtaylor.com
I had to implement some hackarounds to get vertical scrolling for flexslider slide content, however the scroll wheel doesn't appear to always work when I attempt to scroll. Touch and keyboard scrolling seem just fine, but the scroll wheel is very inconsistent. Sometimes, if I go into my inspection tool and flip some CSS rule on or off for the slide element, the scrolling starts working fine (not sure why).
Ultimately, I just want to have a simple, easy scroll working on the Engagement Photos and Location & Event details slides.
Any help here would be most appreciated.
As i understand it, you want it to slide vertical when you scroll.
That can give some complications with the gallery you have, so when you
scroll it will either stop sliding when you reach the gallery or it will
just continue and disable the scrolling through gallery.