Images with different size in Materialize slider

Asked

Viewed 978 times

1

I’m willing to let the slider images of Materialize all the same size, but I’m not succeeding. I left this code to make the slider responsive, only the images are different sizes.

CSS

.section-slide .slider .slides{
    background-color: transparent;
    margin: 0;
    height: 700px;
}
.section-slide .slider .slides li img{
    height: 100% !important;
    width: 100% !important;
    background-position: top;
    background-size: 100% auto !important;
    background-repeat: no-repeat;
}

HTML

<section class="section-slide">
    <div class="slider">
        <ul class="slides">
            <li>
                <img src="img/music10.jpeg" class="responsive-img"> 
                <div class="caption center-align top-setting">
                    <h3>Share Sound</h3>
                    <div class="divider-cap divider"></div>
                    <h5 class="light grey-text text-lighten-3">Proporcionando o conhecimento musical,<br>ajudando e produzindo sempre.</h5>
                </div>
            </li>

            <li>
                <img src="img/music9.jpeg" class="responsive-img"> 
                <div class="caption left-align">
                  <h3>Left Aligned Caption</h3>
                  <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                </div>
            </li>

            <li>
                <img src="img/music4.jpg" class="responsive-img"> 
                <div class="caption right-align right-setting">
                  <h3>Seja sempre o primeiro.</h3>
                  <h5 class="light grey-text text-lighten-3">Produza mais e seja reconhecido !</h5>
                </div>
            </li>
            <li>
                <img src="img/music12.jpeg" class="responsive-img"> 
                <div class="caption center-align">
                  <h3>This is our big Tagline!</h3>
                  <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                </div>
            </li>
        </ul>
    </div>
</section>

Jquery

$(document).ready( function(){
    $('.button-collapse').sideNav(); // Side Nav Mobile
    $('.modal').modal(); // Modal
    $('.slider').slider({
        interval: 6000,
        height: 700
    });
html jquery css materialize

  • In your HTML you do not have .section-slide .slider

  • Oh yes, it is because there is a Section before. I just did not put here.

  • But they’re not the same size in width or height?

  • No, especially when you resize the window, you can see how different their height is. I think this might be because of the original image size.

  • It can be... the script turns the images into background and cuts the ones that are larger than the slider area

  • Previously I had not used height in the script, but the problem was still continuing, and also the slide was overwriting the content for not having set height.

Show 1 more comment

1 answer

0


The slider converts the images into background-image.

The problem is that if you use images in different dimensions, the script will adjust the width to 100% keeping the image ratio and cut the bottom part that exceeds the 700px that you set in the class .slides.

Solution:

Change the background-size for 100% 100% !important; in the CSS .section-slide .slider .slides li img{ that the script will adjust the width and height, but will not maintain the ratio (Aspect ratio). Hence the importance of placing images with but same dimensions to maintain the ratio.

$(document).ready( function(){
    $('.button-collapse').sideNav(); // Side Nav Mobile
    $('.modal').modal(); // Modal
    $('.slider').slider({
        interval: 6000,
        height: 700
    }); 
});
.section-slide .slider .slides{
    background-color: transparent;
    margin: 0;
    height: 700px;
}
.section-slide .slider .slides li img{
    height: 100% !important;
    width: 100% !important;
    background-position: top;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<section class="section-slide">
<div class="slider">
<ul class="slides">
    <li>
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="responsive-img"> 
        <div class="caption center-align top-setting">
            <h3>Test</h3>
            <div class="divider-cap divider"></div>
            <h5 class="light grey-text text-lighten-3">Hello World !.</h5>
        </div>
    </li>

    <li>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/JPEG_example_JPG_RIP_050.jpg" class="responsive-img"> 
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
    </li>

    <li>
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg" class="responsive-img"> 
        <div class="caption right-align right-setting">
          <h3>Seja sempre o primeiro.</h3>
          <h5 class="light grey-text text-lighten-3">Produza mais e seja reconhecido !</h5>
        </div>
    </li>
    <li>
        <img src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg" class="responsive-img"> 
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
    </li>
</ul>
</div>
</section>

Browser other questions tagged html jquery css materialize

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