I have a website with an image gallery on a page. When an image is clicked, a modal pop-up window with backward and forward buttons overlays the screen, and it works just fine.
On mobile, however, I would like to have this modal window expand so that the image takes up 100% width of the screen. I'd like the arrows to disappear, and instead the user should be able to move left and right by swiping. Ideally, there would be a swiping animation.
How would you recommend implementing something like this? Are there any built-in CSS, jQuery, or Angular commands? I want to avoid adding whole libraries or plugins, but if there's something out there that works great, what is it?
I guess the question would be, how do you want your animation? Use the jquery swipe event (as well as swipeleft and swiperight) to add css to transform your elements of you want to include multiple things. There is also the jquery animate effect that you could bind to the swipe event. If you want to keep it simple you could just stick to CSS (and risk breaking in older IE). Check out the reveal tab on this page in your mobile device: https://tympanus.net/Development/DragDropInteractions/reveal.html Note: There's some amazing things you can do on this link using just pure CSS