如何更改JavaScript滑块的大小

Question

I have been trying to change the size of my content slider for the past 2 hours and still no luck.

So here is what i have at the top of my html document:

<script>
    $(function() {
        $('#slides').slidesjs({
            width: 1500,
            height: 350,
            play: {
                active: true,
                auto: true,
                interval: 4000,
                swap: true
            }
        });
    });
</script> 

here is where i insert the image in html and the container: CSS:

.container {
    margin-top:0px;
    margin-left:250px;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;      
}
.container:hover{
    -webkit-filter: grayscale(0%);
}

Html:

<div class="container">
    <div id="slides" >      
        <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>
        <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>
    </div>
</div>

Increasing the width for some reason decreases the height and nothing is done to the width ! I'm very confused ! please help, Thank you !

Answer 1

You haven't closed your img tags.

    <a href="timetablenotts.html"><img src="img/timetableNotts.png" </a>

Should be:

    <a href="timetablenotts.html"><img src="img/timetableNotts.png" /></a>

Answer 2

This slider uses bootstrap and some media queries and working as responsive slider. this is a good feature. you will find full examples in this package

to change the size you need in addition to the slider configuration settings ... you need to change the .container in different media queries.

For example in line 143 of the standard example you will find this size:

  .container {
    width: 1170px
  } 

you may change to:

  .container {
    width: 100%
  }

here is the whole sizes .. you will find inline within the HTML

/* For tablets & smart phones */
@media (max-width: 767px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .container {
    width: auto
  }
}

/* For smartphones */
@media (max-width: 480px) {
  .container {
    width: auto
  }
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 724px
  }
}

/* For larger displays */
@media (min-width: 1200px) {
  .container {
    width: 100%
  }
}