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

Moving <span> elements left and right – Html

I’m trying to move elements on the x-axis

I’m trying to add a slideshow to my webpage. I’ve added Dots to show which picture the slideshow is currently on.

I’ve managed to make use of ‘Float’ to move the dots up and down, but they won’t co-operate with left and right.

If you need more info, let me know

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 230px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  float: right;
}

.active,
.dot:hover {
  background-color: #717171;
}
<div style="text-align: center">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
Tags:

2

Answers


  1. 0

    There are many approaches to this and how you want the dots to move is not clearly stated in the question.

    For example, you may want to utilize display:flex and there are several features you can utilize from it, like maybe programmatically moving a style attribute margin-right: auto between the .dot divs or something else.

    You may also do it with psoition: absolute, provided that you have a fixed value for the width and height of the dots, and that the parent element/container can be position: relative, alignment will not be that hard.

    With what you currently have, maybe playing with their padding or margin on their left or right is enough to make the dots "move".

    Login or Signup to reply.
  2. 0

    You should do like this.

    <style>
.dot-wrapper {
    height:200px; 
    display:flex;
    justify-content: flex-end;
    align-items: center;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  margin:4px;
}

.active,
.dot:hover {
  background-color: #717171;
}  
</style>

<div class="dot-wrapper">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search