How can I position my carousel at the bottom of my page?

Question

I saw this pure css carousel design in this link here . Now, I want this to be on the bottom of my page.

Code snippet:

 .carousel { margin-left: 15%; margin-right: 15%; } ul.slides { display: block; position: relative; height: 600px; margin: 0; padding: 0; overflow: hidden; list-style: none; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } ul.slides input { display: none; } .slide-container { display: block; } .slide-image { display: block; position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; transition: all .7s ease-in-out; } .slide-image img { width: auto; min-width: 100%; height: 100%; } .carousel-controls { position: absolute; top: 0; left: 0; right: 0; z-index: 999; font-size: 100px; line-height: 600px; color: #fff; } .carousel-controls label { display: none; position: absolute; padding: 0 20px; opacity: 0; transition: opacity .2s; cursor: pointer; } .slide-image:hover + .carousel-controls label{ opacity: 0.5; } .carousel-controls label:hover { opacity: 1; } .carousel-controls .prev-slide { width: 49%; text-align: left; left: 0; } .carousel-controls .next-slide { width: 49%; text-align: right; right: 0; } .carousel-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 999; text-align: center; } .carousel-dots .carousel-dot { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; opacity: 0.5; margin: 10px; } input:checked + .slide-container .slide-image { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .carousel-controls label { display: block; } input#img-1:checked ~ .carousel-dots label#img-dot-1, input#img-2:checked ~ .carousel-dots label#img-dot-2, input#img-3:checked ~ .carousel-dots label#img-dot-3, input#img-4:checked ~ .carousel-dots label#img-dot-4, input#img-5:checked ~ .carousel-dots label#img-dot-5, input#img-6:checked ~ .carousel-dots label#img-dot-6 { opacity: 1; } input:checked + .slide-container .nav label { display: block; } 

 <div> <div class="carousel"> <ul class="slides"> <input type="radio" name="radio-buttons" id="img-1" checked /> <li class="slide-container"> <div class="slide-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Timisoara_-_Regional_Business_Centre.jpg"> </div> <div class="carousel-controls"> <label for="img-3" class="prev-slide"> <span>&lsaquo;</span> </label> <label for="img-2" class="next-slide"> <span>&rsaquo;</span> </label> </div> </li> <input type="radio" name="radio-buttons" id="img-2" /> <li class="slide-container"> <div class="slide-image"> <img src="http://www.timisoaranight.gruzphoto.eu/IMG_8554.jpg"> </div> <div class="carousel-controls"> <label for="img-1" class="prev-slide"> <span>&lsaquo;</span> </label> <label for="img-3" class="next-slide"> <span>&rsaquo;</span> </label> </div> </li> <input type="radio" name="radio-buttons" id="img-3" /> <li class="slide-container"> <div class="slide-image"> <img src="https://speakzeasy.files.wordpress.com/2015/05/twa_blogpic_timisoara-4415.jpg"> </div> <div class="carousel-controls"> <label for="img-2" class="prev-slide"> <span>&lsaquo;</span> </label> <label for="img-1" class="next-slide"> <span>&rsaquo;</span> </label> </div> </li> <div class="carousel-dots"> <label for="img-1" class="carousel-dot" id="img-dot-1"></label> <label for="img-2" class="carousel-dot" id="img-dot-2"></label> <label for="img-3" class="carousel-dot" id="img-dot-3"></label> </div> </ul> </div> </div> 

I have tried adding position: absolute and bottom: 0 to the .carousel div but the carousel will go nowhere. I also tried adding position: relative to the most outer div but to no avail.

I didnt change anything from this link , except the position attributes.

I really want this carousel just to be in the bottom of page. Thank you!

Answer 1

Add this CSS . Hope this works fine.

You can Change margin-left , margin-right and width as per your requirement.

.carousel {
    margin-left: 25%;
    margin-right: 25%;
    bottom:0;
   position:fixed;
   width:50%;
 }