-3

Coloquei os slides em um carousel, porém ainda não identifiquei o problema deles permanecerem na vertical e não lado a lado

.gallery .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

/*
    Theme controls how everything looks in Gallery CSS.
*/
.gallery {
  position: relative;
}
.gallery .item {
  height: 400px;
  overflow: hidden;
  text-align: center;
  background: #4d87e2;
}
.gallery .controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.gallery .control-button {
  display: inline-block;
  margin: 0 .02em;
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  transition: color .1s;
}
<html>
  <head>
    <title>PowerFullCar</title>
    <link href="css/gallery.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/gallery.mim.css" rel="stylesheet" type="text/css" />
  </head>
  <body bgcolor="#fffff0">
    <nav class="nav">
    <ul>
    <div class="gallery items-3">
    
      <div id="item-1" class="control-operator"></div>
      <div id="item-2" class="control-operator"></div>
      <div id="item-3" class="control-operator"></div>

      <figure class="item">
        <h1><img src="card.gif"></h1>
      </figure>

      <figure class="item">
        <h1><img src="card.gif"></h1>
      </figure>

      <figure class="item">
        <h1><img src="fini.card.gif"></h1>
      </figure>
      <div class="controls">
        <a href="#item-1" class="control-button">.</a>
        <a href="#item-2" class="control-button">.</a>
        <a href="#item-3" class="control-button">.</a>
    </div>
   </div>
  </ul>
 </body>
</html>

1
  • .item {display: inline-block}
    – hugocsl
    30/10/2020 às 23:10

1 Resposta 1

0

Para ficar lado a lado, o display:inline-block na classe .gallery .item, irá resolver, porém não acho que esse seja seu problema pelo que foi relatado.

Quando vc diz ficar na horizontal, não seria mostrar apenas um depois do outro? Pode ser uma questão de js. Caso seja isso, nos fale o plugin que está utilizando, e como está fazendo a chamada do mesmo.

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 .