Как сделать карусель максимальной шириной и нагрузкой без изменения размера

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%; 
}

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

источник

2015-08-10 10 Replies

Относительно Carousel не работает Если вы используют JQuery, вы можете попробовать позвонить после загрузки Карусели:

$(window).resize()

Без JQuery вы могли бы назвать это

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

Это не изменит размер окна, но будет вызывать все события, которые вызываются, когда ваше окно изменяет размер.

источник

2015-08-10 01:49:04 Ryan

хорошая работа, помогая мне найти ответ! Теперь все, что мне нужно, - это ответ на вторую часть вопроса! Я использовал 'window.dispatchEvent (новое событие ('resize'));' вместо вашего решения, но и там, где одна и та же идея, поэтому я отредактирую ваш ответ. –

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

Я использовал максимальную ширину css, чтобы указать максимальную ширину.

источник

2015-08-10 12:39:37

Как сделать карусель максимальной шириной и нагрузкой без изменения размера

ответ

Смежные вопросы