jQuery UI图像滑块

Question

I have a question about my jQuery UI image slider. I like to add more than two images to change, but I don't know how. What should I change to add more Images to change with the slider? And how can I center the image, at this time it is floated left. Thank you very much!

 $(function() { $("#slider1").slider({ min: 0, max: 2, step: 1, change: function(event, ui) { if (ui.value == 1) { $('#flask').attr('src', 'img/tweet1.png'); } else { $('#flask').attr('src', 'img/tweet2.png'); }; } }); }); 

 #slider1 { align-content: center; margin-left: 15em; margin-right: 15em; margin-top: 5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="img/tweet2.png" height="270" width="600" id="flask" /> <div id="slider1"> 

Answer 1

This will require specific naming of your images. If you can get the count of images from a serverside script, this would also be helpful as it could set the max.

 $(function() { // Set to the number of images you will have var myMax = 2; $("#slider1").slider({ min: 0, max: myMax, step: 1, change: function(event, ui) { // All images must be named correctly: tweetN.png where N is a number // if statement in case you want to use 0 position to start with no image if(ui.value > 0){ $('#flask').attr('src', 'img/tweet' + ui.value + '.png'); } } }); }); 

 #slider1 { align-content: center; margin-left: 15em; margin-right: 15em; margin-top: 5em; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <img src="img/tweet2.png" height="270" width="600" id="flask" /> <div id="slider1"></div> 

If the images will have different names, you can also create an array and iterate each postion of the array via Slider.

Example

$(function() {
  var myImages = [
    "img/tweet1.png",
    "img/tweet2.png",
    "img/logo3.jpg",
    "img/splash4.gif"
  ];
  $("#slider1").slider({
    min: 0,
    max: (myImages.length - 1),
    step: 1,
    change: function(event, ui) {
      $('#flask').attr('src', myImages[ui.value]);
    }
  });
});

Lots of options. Again, if you have access to Server-side scripting like PHP, you could perform an ajax call and get a list of the current images. This way, you just drop the images into one folder, and the script will just know they are there.

Hope that helps.

Answer 2

maybe you should try to increment the "max" value and then to add as many if statements as images you have. Here is an example:

$(function() {
  $("#slider1").slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui) {
      if (ui.value == 1) {
        $('#flask').attr('src', 'img/tweet1.png');
      } 
      if (ui.value == 2) {
        $('#flask').attr('src', 'img/tweet2.png');
      };
      if (ui.value == 3) {
        $('#flask').attr('src', 'img/tweet2.png');
      };
    }
  });
});