2

Quando eu clico no link que me direciona ao respectivo slide, ele está meio que ancorando e deslizando a página um pouco para baixo, como faço para ele passar pro slide sem que o html entenda aquilo como um link em si?

.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>

2
  • 1
    É comportamento normal de um link que aponta para um ID, rolar a página até esse ID. Uma opção seria utilizar javascript outra é colocar os links de rolamento ao lado ao invés de acima ou abaixo.
    – Benilson
    Commented 3/06/2020 às 19:04
  • Utilizei javascript, problema resolvido! Commented 5/06/2020 às 13:02

2 Respostas 2

1

Encontrei a solução com JAVASCRIPT, vou postar aqui. Não sei se é a forma mais correta, mas foi a mais rápida e funcionou.

            $(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>

0

O ideal é utilizar o javascript para isso, pois ao clicar no link o navegador posiciona o elemento no topo da página, maaaaas, no cenário em questão, você consegue fazer com um hackzinho (gambiarra) de margin e padding nos slides.

Você aumenta o tamanho da div no topo e compensa isso com margem negativa, com isso, você posiciona a div na mesma posição do carrossel.

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

O segredo é esses tamanhos serem maior que distância entre o topo e os slides.

Lembrando, isso resolve a sua questão, não é a forma ideal.

https://jsfiddle.net/ntc9xrw1/1/ Fiddle, adicionei as linhas 52 e 53 no css.

1
  • 1
    No Chrome não funciona, continua fazendo o Scroll Commented 4/06/2020 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .