如何使轮播具有最大宽度，并在不调整大小的情况下加载

Question

http://codepen.io/Thisisntme/pen/rVRyJE 是我网站的演示。目前，轮播在调整页面大小之前不起作用。我不知道如何解决这个问题...而且 我还想知道如何使轮播具有最大宽度，使其在台式机上不会超大。（第一个问题已经解决，所以我只需要粗体部分的帮助）

<body>
   <div id="backgroundstuff">
      <script type="text/processing" data-processing-target="canv">
  //Create array of circles
  float oldFPS = 0;
ArrayList<Circle> back = new ArrayList<Circle>();
int rand = random(0,255);
final int PARTICLES = 200;
void setup() {

  smooth(1); //antialias
  size(1000, 1000);
  colorMode(HSB); 
  for (int i = 0; i < PARTICLES; i++) { //add circle objects to array
    back.add(new Circle(
    random(0, width), //x
    random(0, height), //y
    random(100, 200), //radius
    random(0, 360), //direction circle is pointing in
    random((80+rand)%255, (0+rand)%255), //hue
    60 //opacity (alpha)
    ));
  }
}

void draw() {
 background(255); //clear
  fill(0, 0, 255, 255);



  for (int i = 0; i<back.size (); i++) {
    back.get(i).render(1); //render circles input is speed
  }
  drawLines(back);
  if(oldFPS!=frameRate){
    console.log(frameRate);
  }
  oldFPS = frameRate;

}

public void drawLines(ArrayList<Circle> circles) {
  stroke(0, 0, 0, 255);
  for (int i = 0; i < circles.size ()-1; i++) {
    Circle c = circles.get(i);//current circle

    for (int z = i; z < circles.size (); z+=1) {
      Circle f = circles.get(z); //other circle

      if (distance(c.getX(), c.getY(), f.getX(), f.getY()) < 50) {
        stroke(0, 0, 0, 255);
        strokeWeight(2);
        line(c.getX(), c.getY(), f.getX(), f.getY());
      } else if(distance(c.getX(), c.getY(), f.getX(), f.getY()) < 100){strokeWeight(1);
        stroke(0, 0, 0, 255);
        line(c.getX(), c.getY(), f.getX(), f.getY());
      }

    }
  }
}
public float distance(float a, float b, float c, float d) {
  return sqrt(((a-c)*(a-c))+((b-d)*(b-d))); //a^2+b^2=c^2
}

public class Circle {
  float xPos, yPos, rad, dir, hue, opacity;
  public Circle(float x, float y, float radius, float direction, float inhue, float alpha) {
    xPos = x;
    yPos = y;
    rad = radius;
    dir = direction;
    hue = inhue%255;
    opacity = alpha;
  }
  public float getX() {
    return xPos;
  }
  public float getY() {
    return yPos;
  }
  public void render(float Speed) {
    float dirRadian = radians(dir); //so I dont have to deal with radians.
    if (yPos < 0 || yPos > width) { // bounce off top or bottom
      dir*=-1;
      dirRadian = radians(dir);
      xPos += Speed*cos(dirRadian);
      yPos += Speed*sin(dirRadian);
    }
    if (xPos < 0 || xPos > height) { //bounce off left or right
      dir = 180-dir;
      dirRadian = radians(dir);
      xPos += Speed*cos(dirRadian);
      yPos += Speed*sin(dirRadian);
    }
    fill(hue, 255, 255, opacity);
    noStroke();
    drawCircle(xPos, yPos, rad);
    xPos += Speed*cos(dirRadian); //moveX
    yPos += Speed*sin(dirRadian); //moveY
  }
  private void drawCircle(float xPos, float yPos, float rad) {
    ellipse(xPos, yPos, rad, rad);
  }
}



</script>
         <canvas id="canv">
         </canvas>
  </div>
   <div class="navbar">
      <div class="container">
         <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ART</a></li>
            <li><a href="">MUSIC</a></li>
            <li><a href="">STUFF</a></li>
            <li><a href="">LINKS</a></li>
         </ul>
      </div>
   </div>
   <div class="mainTitle">
      <div class="container">
         <h1>Shane's Website!</h1>
      </div>
   </div>
 <div class="gallery">
   <div class="gallery-cell">
      <img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art"/>
   </div>
   <div class="gallery-cell">
      <img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff"/>
  </div>
  <div class="gallery-cell">
  </div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
</div>
   <div class="CC">
      <div class="container">
         <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" /></a>
         <br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">   Creative Commons
   Attribution-ShareAlike 4.0    International License.  </a>
      </div>
   </div>
</body>

CSS

canvas {
   outline: 0px;
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: auto;
}

@font-face {
   font-family: Avenir;
   src: url("https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf");
}

body {
   background-color: white;
   overflow-x: hidden;
   /*background-image: url("https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/BACKGROUND.jpg");*/

   background-size: auto 140%;
}
/*NAVIGATIONAL PANEL*/

.navbar {
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   width: 120%;
   position: relative;
}

.navbar li {
   list-style-type: none;
   width: 100%;
   font-family: Avenir;
   src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf")
}

.navbar li a {
   padding: 6px 0px 6px 0px;
   float: left;
   width: 16%;
   text-align: center;
   color: black;
   background-color: rgba(255, 255, 255, .8);
   border-radius: 40px;
   font-size: 20px;
}
/*TITLE*/

.mainTitle {
   margin: auto;
   width: 100%;
   padding: 6px 0px 6px 0px;
   background-color: rgba(0, 0, 0, 0.85);
   position: relative;
   top: 20px;
}

.mainTitle h1 {
   color: white;
   font-family: Avenir;
   font-size: 50px;
   text-align: center;
}

.CC {
   top: 500px;
   font-family: Avenir;
   position: relative;
   background: rgba(255, 255, 255, .5);
   border-radius: 5px;
   rgba(255, 255, 255, .5);
   float: left;
   border: 3px solid black;
   padding: 20px;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
   padding: 50px 0px 0px 0px;
}

.gallery-cell {
    width: 100%;
}

.gallery img {
  width: 100%;
}

JS

var flkty = new Flickity('.gallery');

Answer 1

关于轮播不工作如果您正在使用 JQuery，您可以尝试在加载 Carousel 后调用此方法：

$(window).resize()

没有 jquery 你可以这样称呼

window.dispatchEvent(new Event('resize'));

这不会更改 window 的大小，但会触发在调整 window 大小时调用的所有事件。

Answer 2

.gallery {
   max-width: 1400px;
   margin: auto;
   padding: 50px 0px 0px 0px;
}

我使用最大宽度 css 来指定最大宽度。

如何使轮播具有最大宽度，并在不调整大小的情况下加载

How to make carousel have a max width, and load without resize

html

javascript

css

flickity