Html Question posted in
Some basic documentation can be found here.

Html – How can I make a horizontally sliding image on a website?

So I’ve been trying for a few days to get this to work but I’m no closer.
I’m making a website and at the top I’m trying to get a square image, a map to be specific, that’s as wide, and tall, as the viewport height. Naturally the image is centered. Thats the easy part but I’m struggling to make it in such a way that you can drag/slide the image to the right or left to see the rest of the map.

The attached gif should help explain, with the green square being the image, the rectangle being the screen/viewpoint, and the grey circle being a tap and swipe motion that moves the image.
animated example of what I have previously outlined

I’ve tried a good few ways to make an image carousel but nothing has worked the way I’d like.
I’m trying to get it to slide horizontally smoothly without snapping to a set position, and most examples or libraries move it across a set distance each time, and with only one element (the image) I don’t see how I could use these examples.
Additionally most resources are from 10+ years ago and either don’t work, or aren’t available anymore.

I’d greatly appreciate any help, even a nudge in the right direction.

Tags:

2

Answers


  1. 0

    yes it’s possible. It’s often possible.
    Use Glide.js for that!

    You could find some examples/docs in the official site

    Login or Signup to reply.
  2. 0

    Set overflow: auto on your map’s parent element to enable you to drag/scroll/pan the map sideways.

    Here I have used a <div> element as the map’s parent to illustrate the technique, but if your map’s parent is the <body> element you could apply overflow: auto to that instead.

    I am using Javascript to set the scroll position of the parent so that the map will be centered within the ‘viewport’ and can be scrolled left or right.

    const d1 = document.querySelector('.d1')
d1.scrollLeft = (d1.scrollWidth - d1.clientWidth) / 2;
    .d1 {
  border: 3px solid red;
  width: 188px;
  height: 406px;
  overflow: auto;
  margin: 0 auto;
}

.d1 img {
  height: 100%;
  display: block;
}
    <div class="d1">
  <img src="https://www.worldatlas.com/r/w1200/upload/08/4d/54/au-01.png">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search