Carrosel desalinhado

Front-end CSS
, , ,
#1

Eu tenho um carrosel de imagens em html e css e quero centralizar o 3° elemento com translateX porém eu não consigo segue o código abaixo:

Obs: A aplicação é para dispositivos de 710px para baixo e eu quero centralizar de 710 para baixo.

    #slide_section{
        width: 100%;
        height: auto;
        padding-bottom: 40px;
    }

    #slide{
        width: 76.06295754026354vw;
        height: auto;
        margin: auto;
    }

    #imgSlide{
        width: 100%;
        height: 300px;
        margin: unset;
        display: flex;
        
        /*Modifica está linha*/
        transform: translateX(calc(-15% - -5vw));
    }

    .slide{
        width: 76.06295754026354vw;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img {
        width: 120px;
        height: 210px;
    }

    .slide{
        width: 158px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img{
        width: 158px;
        height: 276px;
    }

<section id="slide_section">       
      <div id="slide">
          <div id="imgSlide">
              <div class="slide" id="img1">
                  img...
              </div>
              <div class="slide" id="img2">
                  img...
              </div>

              <div class="slide" id="img3">
                  img...        
              </div>

              <div class="slide" id="img4">
                  img...
              </div>

              <div class="slide" id="img5">
                  img..
              </div>

              <div class="slide" id="img6">
                  img...
              </div>
          </div>
      </div>
</section>
Carrosel desalinhado
Carrosel desalinhado
#2

Vc conseguiria criar um https://jsfiddle.net/ com esse código para gente ver?

#3

Aqui, se estiver amador, é porque é a primeira vez que eu fiz algo neste site.

1 curtida
#4

Foi mal, acho que não entendi direito o que vc quer dizer com centralizar o 3° elemento.

#5

Deixa o terceiro elemento no centro da exibição

#6

vc quer deixar tipo assim?

image
image1920×1200 99.1 KB

Já tentou utilizar uma lib pronta pra carousel?

Conheço essas:

OwlCarousel
Swiper
Slick

1 curtida
#7

Exatamente! Eu não tentei usar nenhuma lib, porque eu sempre quis aprender a resolver todo tipo de problema com a linguagem pura, mas neste caso, se eu não conseguir a resposta que eu procuro terei de usar.

#8

Nem sempre fazer tudo na mão é a melhor opção, as vezes vc só tá reinventando a roda…

e nas empresas geralmente é utilizado lib externa, até pq é só instalar e usar do jeito q quiser

#9

Entendi, obrigado por suas explicações!

#10

Uma ultima pergunta, as bibliotecas que você me passou funcionam com videos?

#11

sim, eles dão o suporte pra vc usar a lib e o que vc coloca dentro dela é totalmente customizável, tipo

<div class="swiper">
    <div class="slides">
           <div>
              //imagem
           </div>

           <div>
              //video
           </div>

           <div>
              ...
           </div>
    <div>
</div>
#12

Entendi, obrigado

#13

Mas uma pergunta, tem como fazer o que eu peço? Para melhor compreensão do que eu quero lhe pedir eu mando um link no privado para um site que estou fazendo para você entender.

#14

Se quiser me ajudar me da um aviso que eu mando o link.

#15

acho melhor vc tentar fazer primeiro, e se tiver dificuldades criar outro tópico.

#16

Tentar fazer com as bibliotecas?

#17

Como vc achar melhor, com biblioteca vai facilitar muito

#18

Entendi, obrigado