CODEWITHSUNDEEP
htmlcss
Kern Elliott
Kern Elliott

Reputation: 1659

Putting next and previous arrow on either side of an image

I have an image in a div that has the size of 300px and I want to next and previous arrow on either side of the the image. However with one added issue is that if the screen is 300px I want the arrows to be on top of the image. How can this be done?

my div code is below:

<!--this div is the container for the carousel -->
<div id='mySwipe' style='max-width:300px; margin:0 auto' class='swipe'>
  <!--the images are in this div -->
  <div class='swipe-wrap'id="featured">
  </div>
</div>

Upvotes: 1

Views: 4412

Answers (1)

Jared
Jared

Reputation: 3016

.container { position: relative; }

.container .arrow { position: absolute; top: 150px; }

.container .arrow.left { left: 0; }

.container .arrow.right { right: 0; }

By setting relative positioning to the parent (default is static) and absolute positioning to the children, they will be absolute relative to their parent.

Upvotes: 2

Related Questions