Problem with HTML and CSS carousel

When I click on the link that directs me to the respective slide, it is kind of anchoring and sliding the page down a bit, how do I get it to go pro slide without html understanding that as a link itself?

.slider {
  width: 300px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
                        <div class="slider">
                            <a href="#slide-1">1</a>
                            <a href="#slide-2">2</a>
                            <a href="#slide-3">3</a>
                            <a href="#slide-4">4</a>
                            <a href="#slide-5">5</a>

                            <div class="slides">
                                <div id="slide-1">
                                  1
                                </div>
                                <div id="slide-2">
                                  2
                                </div>
                                <div id="slide-3">
                                  3
                                </div>
                                <div id="slide-4">
                                  4
                                </div>
                                <div id="slide-5">
                                  5
                                </div>
                            </div>
                        </div>
Author: Lucas Fonseca, 2020-06-03
Source

2 answers

Found the solution with JAVASCRIPT, I will post here. I do not know if it is the most correct way, but it was the fastest and it worked.

            $(document).ready(function(){
                $('#s1').click(function (){
                   $('.slides').scrollLeft(0);  
                });
                $('#s2').click(function (){
                   var largura_div = $('.slider').width(); 
                   $('.slides').scrollLeft(largura_div);  
                });
                $('#s3').click(function (){
                   var largura_div = $('.slider').width(); 
                   $('.slides').scrollLeft(largura_div * 2);  
                });
                
            });
.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  min-height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #DCDcDC;
  color: #111;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  text-align: justify;
  padding: 20px;
}

.slides > div i {
    font-size: 120px;
    color: #2196f3;
}

.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
  cursor: pointer;
}

@media only screen and (max-width:778px){
    .slides > div i {
        margin-bottom: 200px;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
                            <a id="s1">1</a>
                            <a id="s2">2</a>
                            <a id="s3" >3</a>

                            <div class="slides">
                                <div id="slide-1">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br>
                                            <i class="icofont icofont-industries-alt-5"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>1</b></h5>
                                        </div>
                                    </div>
                                </div>
                                <div id="slide-2">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br>
                                            <i class="icofont icofont-stock-mobile"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>2</b></h5>
                                        </div>
                                    </div>
                                </div>
                                <div id="slide-3">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br><br>
                                            <i class="icofont icofont-food-cart"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>3</b></h5>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
 1
Author: Lucas Fonseca, 2020-06-05 13:01:13

The ideal is to use javascript for this, because by clicking on the link the browser positions the element at the top of the page, maaaaas, in the scenario in question, you can do with a hackzinho (gambiarra) of margin and padding in the slides.

You increase the size of the Div at the top and compensate for this with negative margin, with this, you position the div in the same position as the carousel.

  padding-top:50px;
  margin-top:-50px;

The Secret is that these sizes are greater than the distance between the top and the slide.

Remembering, this solves your question, not the ideal way.

Https://jsfiddle.net/ntc9xrw1/1 / Fiddle, I added lines 52 and 53 in css.

 0
Author: Rogerio Santos, 2020-06-04 12:22:18