Images with different size on the slider Materialize

Question

Images with different size on the slider Materialize

Navigation

#1 by (0 votes)

1

I'm wanting to leave the Materialize slider images all the same size, but I'm not getting any success. I left this code to make the slider responsive, but the images are in 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

asked by anonymous 10.01.2018 / 01:09

1 answer

Create function of hexadecimal and octal conversion function in python Problems with rollback in Laravel 5.5

score 0 · Accepted Answer

The slider converts the images to background-image .

The problem is that if you use images in different dimensions, the script will adjust the width to 100% by keeping the image proportion and cutting the bottom that exceeds the% w / o% you set in the 700px class.

Solution:

Change the .slides to background-size in CSS% with% that the script will adjust the width and height, but will not maintain the ratio ( ). So the importance of putting images with the same dimensions to maintain the proportion.

$(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><linkrel="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><sectionclass="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>