how do I make the slider responsive?

Asked

Viewed 913 times

-1

I have a slider in pure css and would like to make it responsive.

<title>Slider UNIP</title>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/vendor/normalize.css">
  <link rel="stylesheet" href="../../dist/gallery.prefixed.css">
  <link rel="stylesheet" href="../../dist/gallery.theme.css">
</head>
<body>

  <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">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua1.jpg"/>
  </figure>

  <figure class="item">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua3.jpg"/>
  </figure>

  <figure class="item">
    <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua2.png"/>
  </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>
</body>
</html>
html css slider

  • Friend, you have some example to help?

1 answer

0

Creates a div between the slider images occupying any screen with width: 100%, and then it’s only by for each slider to occupy 33% of the parent width. In mobile, the image is recommended to take up the entire screen. Hence another viewport issue, @mediaqueries.

<div class="sliders">
    <figure class="slide-item"><img src="" alt=""></figure>
    <figure class="slide-item"><img src="" alt=""></figure>
    <figure class="slide-item"><img src="" alt=""></figure>
    </div>

.sliders { width: 100% }
.sliders figure { width: 32%; margin-right: 1%; float: left }
.sliders figure img { width: 100% }

There goes according to how many sliders you want in the container.

Browser other questions tagged html css slider

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