Responsive slider in css

Asked

Viewed 188 times

0

How to leave mine slider responsive. I’ve typed all the codes, and it’s on css pure ( I made it from galleries I downloaded on the internet, serving to change color, icons, etc.) ai would like to know the code I should put and where I should implode it, to leave my slider responsive. 

<!doctype html>
<html lang="en">
<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>
css slider

  • You can use the media screen through css, or you can use some ready-made, have you thought about that? I give an example of Flexslider that contains the touch option enabled and is responsive, not to mention that it is very easy to implement/customize, following link: http://flexslider.woothemes.com/

1 answer

0

You can create a tag of <style> inside the file to quickly test and then move to the css file if you want. Within this tag you can use the Media Query where you specify the screen size and how your slider should look. Follow an example:

<style>
@media (max-width: 800px){
    .gallery {
        width: 100%;
    }
    .controls {
        width: 100%;
    }
}
</style>

This makes the browser understand that when the screen is less than or equal 800px wide your slider should be equal to 100% size (width). From there Voce can specify screen size and values for the slider.

Browser other questions tagged css slider

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