Clever Geek Handbook

Materialize slider playback

I am trying to create a website with Materialize and the site has a slider. Materialization is responsive and works well at various resolutions. However, when I decrease the screen size, the slider width also decreases (as it should). But the image in it is simply cropped and not scaled to the size of the slider. I added the class responsive-img

in img

, but nothing has changed.

Slider code

            <div class="slider">
                <ul class="slides">
                    <li>
                        <img src="images/slider/slide_1.jpg">
                        <div class="caption center-align">
                            <h3>Eraltek Kurumsal</h3>
                            <h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
                        </div>
                    </li>
                    <li>
                        <a href="panoramic/panoramic.html">
                            <img src="images/slider/slide_2.jpg">
                            <div class="caption right-align">
                                <h3>Eraltek Mağaza</h3>
                                <h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
                            </div>
                        </a>
                    </li>
                    <li>
                        <img src="images/slider/slide_3.jpg">
                    </li>
                    <li>
                        <img src="images/slider/slide_4.jpg">
                    </li>
                    <li>
                        <img src="images/slider/slide_5.jpg">
                    </li>
                </ul>
            </div>
+3


source to share


3 answers


Try to define in your css file



.slider .slides li img {
    background-size:100% auto;
    background-repeat: no-repeat;
}
+2


source


You should try adding css

max-width: 100%;



into the tag <img>

. Hope this solves the problem. Also don't forget to add the class responsive-img

to<img>

+2


source


Use img-responsive class with img tag (you are using responsive-img, this is bootstrap class. It doesn't work in materialized design)

   $(document).ready(function () {
       $('.slider').slider({full_width: true});
   });
      

        
        
        
      

    
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

 <div class="slider">
            <ul class="slides">
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
                    <div class="caption center-align">
                        <h3>This is our big Tagline!</h3>
                        <h5 class="light grey-text text-lighten-3">Here our small slogan.</h5>
                    </div>
                </li>
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
                    <div class="caption left-align">
                        <h3>Left Aligned Caption</h3>
                        <h5 class="light grey-text text-lighten-3">Here our small slogan.</h5>
                    </div>
                </li>
            </ul>
        </div>
Run codeHide result


0


source






More articles:


All Articles