1

Fala pessoal estou prestes a desenvolver essa tela com html e css e precisava saber se é possível criar um slide com esses dots ou se da para fazer de uma outra maneira a ideia é clicar nesses links e ele trocar a imagem de fundo seria um slide digamos assim pensei em usar esse slide aqui mais o desafio mesmo seria estilizar esses dots

Segue meu código: html:

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide-wonder-woman">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8">
                            <h1 class="title">wonder<br><span>Woman</span></h1>
                        </div>
                        <div class="-wonder-woman"></div>  
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide-superman">Slide 2</div>
            <div class="swiper-slide slide-batman">Slide 3</div>
            <div class="swiper-slide slide-aquaman">Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

CSS:

    .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;


        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }

        .slide-wonder-woman{
          background-image: url("../images/bg-slide-wonder-woman.jpg");
          background-size: cover;
          background-repeat: no-repeat;

          .title{
            position: relative;
            color: $white;
            font-family: 'gotham-book';
            text-transform: uppercase;
            letter-spacing: 45px;
            text-align: center;
            line-height: 90px;
            font-size: 3.5em;
            z-index: 1;
            &:after{
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              margin: 0 auto;
              background-image: url("../images/wonder-woman-logo.png");
              width: 496px;
              height: 212px;
              z-index: -1;
            }

            span{
              font-family: 'gotham-ultra';
              letter-spacing: normal;
              font-size: 2.5em;
            }
          }

          .-wonder-woman{
            background-image: url("../images/wonder-woman.png");
            width: 1000px;
            height: 100vh;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
          }
        }

.swiper-container-vertical>.swiper-pagination-bullets{
      left: 40px!important;
      right: auto;  
  }

  .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }

  .swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
  }

JS:

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
    },
});
8
  • 1
    Cara é perfeitamente possível, mas sugiro que guarde a pergunta para quando já estiver com o seu código mais desenvolvido, ou que pelo menos vc já tenha parte do código rodando para podermos no mínimo simular o seu problema aqui... Olha aqui prntscr.com/m2jzkr pelo DevTools mesmo já deu para começar a estilizar alguma coisa em menos de 2 minutos
    – hugocsl
    Commented 3/01/2019 às 12:43
  • @hugocsl oloko como você fez ? cada dot teria que ter um estilo diferente segue mais tranquilo eu vou codificar Commented 3/01/2019 às 12:49
  • 1
    Esse Dot na verdade é um span ai basta vc colocar o texto dentro desse Span. Se esse Span for gerado automaticamente (acredito que seja), ai fica um pouco mais difícil estilizar tudo... mas não é impossível... tem que ver com o código rodando localmente e com um exemplo real, por isso falei pra vc desenvolver mais as coisas antes de perguntar..., é só uma dica ;)
    – hugocsl
    Commented 3/01/2019 às 12:55
  • 1
    @hugocsl eu editei a pergunta e adicionei o código acho que agora está no formato que comentou pode me ajudar a partir daqui ? Commented 3/01/2019 às 14:16
  • 1
    Tem sim, já até mexi aqui... não é muito complexo... mas tem que ter alguma técnica com CSS, principalmente para colocar o texto no span que é gerado dinamicamente... Mas praticamente não precisa de JS, fiz tudo com CSS :D agora é esperar reabrir....
    – hugocsl
    Commented 3/01/2019 às 15:32

1 Resposta 1

1

Segue um modelo, e já vou avisando CSS é para ser usado rss, pois tem jeito que pode discordar de algumas coisas, como por exemplo colocar o texto cono o content do ::after...

Então, cada span dot é um nth-child, logo vc pode fazer um span:nth-child(n)::after para colocar textos individualmente no content="texto" de cada "dot"

Tirando isso o resto é tudo CSS básico, menos a linha abaixo do item ativo, que é um background linear-gradient que fica deslocado com background-position para fora da tela, e quando ativo faz o transition para dentro da tela.

inserir a descrição da imagem aqui

Segue o código referente a imagem acima. Aproveite para habilitar o scroll com o wheelmouse e colocar uma imagem e texto para ficar mais próximo do exemplo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <!-- <link rel="stylesheet" href="../dist/css/swiper.min.css"> -->
  <link rel="stylesheet" href="http://idangero.us/swiper/dist/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      padding-right: 50px;
      padding-left: 190px;
    }
    .swiper-pagination-bullet {
      color:#000;
      opacity: 1;

      font-size: 20px;
      font-weight: bold;
      background-color: transparent;
      border-radius: 0;
      width: 140px;
      height: 60px;
      text-align: left;
      padding: 8px;
      box-sizing: border-box;
      position: relative;
      background-repeat: no-repeat;
      background-position: -160px 0;
      background-image: linear-gradient(to bottom, transparent 58px, transparent 58px);
      transition: 300ms;
    }
    .swiper-pagination-bullet-active {
      background-image: linear-gradient(to bottom, transparent 58px, red 58px);
      background-position: 0 0px;
      color: red;
    }

.swiper-pagination-bullet::before {
  content: "0";
}
    .swiper-container-vertical>.swiper-pagination-bullets {
      right: auto;
      left: 0px;
    }
    .swiper-pagination-bullet::after {
      content: "";
      position: absolute;
      bottom: 8px;
      left: 8px;
      font-size: 14px;
      font-weight: normal;
    }
    .swiper-pagination-bullet:nth-child(1)::after {
      content: "123";
    }
    .swiper-pagination-bullet:nth-child(2)::after {
      content: "texto";
    }
    .swiper-pagination-bullet:hover {
      background-color: rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://unsplash.it/100/100" alt="" style="width:100%; height:100%; object-fit:cover; position: absolute; top: 0; left: 0; z-index: -1;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae minima, asperiores eius saepe eaque incidunt antatis eum fugit.
        <a href="#">MEU LINK</a>
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <!-- <script src="../dist/js/swiper.min.js"></script> -->

  <script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
      },
      mousewheel: {
        invert: false,
      },
    });
  </script>
</body>
</html>

OBS: No mais o CSS ainda pode ser mais refinado, mas ai vou deixar por sua conta. Se vc quiser deixar ainda mais responsive vc pode ir trocando as medidas de px para % usar REM e EM etc, mas tb vou deixar isso pra vc...

4
  • 1
    cara você é um deus no css hahahah cara como insiro um 0 na frente dos numeros por favor Commented 3/01/2019 às 17:06
  • 1
    @Kirito coloca isso no css .swiper-pagination-bullet::before { content: "0"; } vai ficar perfeito! Se quiser fazer direto no JS a regra é aqui return '<span class="' + className + '">' + (index + 1) + '</span>'; mas eu não manjo nada de JS, com CSS ficou ótimo, mas se quiser mesmo com JS vc vai ter que pedir ajuda de alguém que manja de JS mesmo rss. E mesmo no JS tem que lembrar que o 0 só vai até 09, no 10 a regra tem que parar de aplicar, da pra corrigir isso com nth-child, mas um slider de mais de 10 item não é legal de qq forma...
    – hugocsl
    Commented 3/01/2019 às 17:14
  • eu adicionei esse before mais nada aconteceu só falta isso e acaba Commented 3/01/2019 às 17:20
  • @Kirito cara editei o código aqui da resposta mesmo e coloquei esse CSS... olha ai que funcionou direitinho. É só vc executar o código para ver que agora tem um 0 na frente dos números
    – hugocsl
    Commented 3/01/2019 às 17:24

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 .