Image Slider with Navigation Bullets


#1

Hi!
I made a image slideshow with little circles for navigation in html and css. The sliding works fine, but the slider isen’t in the center, although text-align: center; is set. Also, because of that, a piece of the previous image is visible next to the current image.
I’ve already tried setting another percentage for the images to slide left, but that isn’t responsible and doesn’t work for smaller or bigger screens.
Can somebody help me?:pray:

Here is what i coded: http://jsbin.com/morinawufe/edit?html,css,output


#2

You should do the margin-right little bit higher so the slider moves to the left


#3

In this CSS block, you are resetting the margin to 0:

.sliderElements,
.sliderElements figure,
.sliderControls {
    margin: 0;
}

Depending upon the browser, it will have some padding applied too. You can right click and then open up Developer Tools to inspect the styles for .slideElements. Notice that when using Chrome, it applies -webkit-padding-start: 40px; to ul, menu, dir. Firefox does the same thing like this: padding-inline-start: 40px;.

What you can do then is reset the padding for that element to ensure you have the positioning you want.

If you only want to get rid of the padding-left for that slider container, then do this:

.sliderElements, .sliderElements figure, .sliderControls {
    margin: 0;
    padding: 0;
}

#4

First of all thanks for your quick response. It works fine with the liked code, but when I apply this exact css code to another code, you can still see a bit of the second image while viewing the first one.
Do you know by chance why that happens to be the case?


#5

Here’s a strategy for you to discover what is happening.

  1. In either Chrome or Firefox, right click on the element (that image). A dialog box pops open.
  2. Select to Inspect (Chrome) or Inspect Element (Firefox). That opens up Developer Tools container.
  3. In the Elements tab, you have the HTML on the right and Styles on the left. Explore the CSS rules that are being applied to that element.

You may need to drill up to the ul or the parent container to discuss what is happening. But start at the affected element. The clues are in the Developer Tools interface.


#6

Thanks again for your help. I could find the problem and now everything is working fine.