0

I created an image slider but I don't know how to center it even though I tried using the justify-content and align-items properties but it doesn't work.

I tried using the justify-content and align-items properties but the images and the radio buttons doesn't go on center.

Here's my code:

    `
<!--image slider start-->
        <div class="slider">
            <div class="slides">
                <!--radio buttons start-->
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <!--radio buttons end-->
                <!--slide images start-->
                <div class="slide first">
                    <img src="images/slider-1.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-2.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-3.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-4.jpg" alt="">
                </div>
                <!--slide images end-->    
                <!--automatic navigation start-->
                <div class="nav-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>
                </div>
                <!--automatic navigation end-->                          
            </div>
            <!--manual navigation start-->
            <div class="nav-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
        </div>
        <!--image slider end-->

        <script type="text/javascript">
            var counter = 1;
            setInterval(function(){
                document.getElementById('radio' + counter).checked = true;
                counter++;
                if(counter > 4){
                    counter - 1;
                }
            }, 5000);
        </script>

and here's the CSS:

`/**For slider images**/
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}`
1

2 Answers 2

0
  • You just need to add margin: 0 auto; to the slider class
  • and take the parent div of the slider and give height: 100vh; display: flex; align-items: center; make center your slider and radio buttons.

I am also attaching the code below.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider-wrapper{
  height: 100vh;
  display: flex;
  align-items: center;
}

/**For slider images**/
.slider {
  width: 800px;
  height: 500px;
  overflow:  hidden;
  margin: 0 auto;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  left: 50%;
  width: 800px;
  height: 500px;
}

/**for manual slide nav**/
.nav-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;

}

.manual-btn {
  border: 2px solid #add8e7;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #add8e7;
}

#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -20%;
}

#radio3:checked ~ .first {
  margin-left: -40%;
}

#radio4:checked ~ .first {
  margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;

}

.nav-auto div {
  border: 2px solid #add8e7;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.nav-auto div:not(:last-child) {
  margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
  background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
  background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
  background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
  background: #add8e7;
}
<div class="slider-wrapper">
    <!--image slider start-->
    <div class="slider">
        <div class="slides">
            <!--radio buttons start-->
            <input type="radio" name="radio-btn" id="radio1">
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
            <input type="radio" name="radio-btn" id="radio4">
            <!--radio buttons end-->
            <!--slide images start-->
            <div class="slide first">
                <img src="images/slider-1.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-3.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-4.jpg" alt="">
            </div>
            <!--slide images end-->    
            <!--automatic navigation start-->
            <div class="nav-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
            </div>
            <!--automatic navigation end-->                          
        </div>
        <!--manual navigation start-->
        <div class="nav-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
        </div>
        <!--manual navigation end-->
    </div>
    <!--image slider end-->
</div>

    <script type="text/javascript">
        var counter = 1;
        setInterval(function(){
            document.getElementById('radio' + counter).checked = true;
            counter++;
            if(counter > 4){
                counter - 1;
            }
        }, 5000);
    </script>

0
0

You have applied overflow:hidden property to a .slider class. So whenever you apply display:flex; property to .slider class it is centering everything to that class and due to overflow:hidden property content got disaapear. Instead of applying display:flex; justify-content:center; align-items:center; to .slider class. Put .slider class inside another class and then apply display:flex; justify-content:center; align-items:center;properties to it. Thank you.

  var counter = 1;
            setInterval(function(){
                document.getElementById('radio' + counter).checked = true;
                counter++;
                if(counter > 4){
                    counter - 1;
                }
            }, 5000);
main{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}
<main>
<div class="slider">
            <div class="slides">
                <!--radio buttons start-->
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <!--radio buttons end-->
                <!--slide images start-->
                <div class="slide first">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwRZL9s9_-gtHfUexM5Uc2W4W2SLINf4VNGUWBPFLDuw&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8qotyu4Wk9mK7PrwarfZgapdOaZcYpUOfZCcVXPDhNA&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUWijmNaIAo0q5TwKQz_l614_efeyNa6F_5l7VIUb-Xg&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRELm9fhk6eOno_A2-5sNM9dsQBw69zifHyhcgQ3P1HtQ&s" alt="">
                </div>
                <!--slide images end-->    
                <!--automatic navigation start-->
                <div class="nav-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>
                </div>
                <!--automatic navigation end-->                          
            </div>
            <!--manual navigation start-->
            <div class="nav-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
        </div>
</main>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.