Slides form a vertical list

Asked

Viewed 20 times

-3

I put the slides in a Carousel, but I still haven’t identified the problem of them staying upright and not side by side

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

html css carousel slide

  • .item {display: inline-block}

1 answer

0

To stand side by side, the display:inline-block in class . gallery . item will solve, but I don’t think this is your problem so it was reported.

When you say stay horizontal, wouldn’t it be show only one after the other? It might be a matter of js. If so, tell us the plugin you are using, and how you are making the call from it.

Browser other questions tagged html css carousel slide

You are not signed in. Login or sign up in order to post.