图像滑块JavaScript问题

Question

So essentially the image sliders on my Portfolio all work fine on my local files (on my desktop). Though as soon as I upload it to my live site it decides to completely not work after my first portfolio tile (the only one that works).

The current JavaScript isn't pretty and pretty repetitive and I think that's what the issue is. I've just copy and pasted the JavaScript for each slider in one .js file with different id's to correspond with the different id's of the slider ie #slider1, #slider2 etc

What I want to know is there a way to have all ID's for my sliders in my portfolio's to be put into one JavaScript script rather than several repeated with different element names? Right now it's just unnecessary repetition.

If you don't think that's the reason why it isn't working on live could you please point me in the right direction as to what else it could possibly be? Much appreciated!

Live site: www.hghazni.com

 // portfolio slider jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 2 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider2 ul li').length; var slideWidth = $('#slider2 ul li').width(); var slideHeight = $('#slider2 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider2').css({ width: slideWidth, height: slideHeight }); $('#slider2 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider2 ul li:last-child').prependTo('#slider2 ul'); function moveLeft() { $('#slider2 ul').animate({ left: + slideWidth }, 200, function () { $('#slider2 ul li:last-child').prependTo('#slider2 ul'); $('#slider2 ul').css('left', ''); }); }; function moveRight() { $('#slider2 ul').animate({ left: - slideWidth }, 200, function () { $('#slider2 ul li:first-child').appendTo('#slider2 ul'); $('#slider2 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 3 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider3 ul li').length; var slideWidth = $('#slider3 ul li').width(); var slideHeight = $('#slider3 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider3').css({ width: slideWidth, height: slideHeight }); $('#slider3 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider3 ul li:last-child').prependTo('#slider3 ul'); function moveLeft() { $('#slider3 ul').animate({ left: + slideWidth }, 200, function () { $('#slider3 ul li:last-child').prependTo('#slider3 ul'); $('#slider3 ul').css('left', ''); }); }; function moveRight() { $('#slider3 ul').animate({ left: - slideWidth }, 200, function () { $('#slider3 ul li:first-child').appendTo('#slider3 ul'); $('#slider3 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 4 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider4 ul li').length; var slideWidth = $('#slider4 ul li').width(); var slideHeight = $('#slider4 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider4').css({ width: slideWidth, height: slideHeight }); $('#slider4 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider4 ul li:last-child').prependTo('#slider4 ul'); function moveLeft() { $('#slider4 ul').animate({ left: + slideWidth }, 200, function () { $('#slider4 ul li:last-child').prependTo('#slider4 ul'); $('#slider4 ul').css('left', ''); }); }; function moveRight() { $('#slider4 ul').animate({ left: - slideWidth }, 200, function () { $('#slider4 ul li:first-child').appendTo('#slider4 ul'); $('#slider4 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 5 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider5 ul li').length; var slideWidth = $('#slider5 ul li').width(); var slideHeight = $('#slider5 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider5').css({ width: slideWidth, height: slideHeight }); $('#slider5 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider5 ul li:last-child').prependTo('#slider5 ul'); function moveLeft() { $('#slider5 ul').animate({ left: + slideWidth }, 200, function () { $('#slider5 ul li:last-child').prependTo('#slider5 ul'); $('#slider5 ul').css('left', ''); }); }; function moveRight() { $('#slider5 ul').animate({ left: - slideWidth }, 200, function () { $('#slider5 ul li:first-child').appendTo('#slider5 ul'); $('#slider5 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); // portfolio slider 6 jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); }); var slideCount = $('#slider6 ul li').length; var slideWidth = $('#slider6 ul li').width(); var slideHeight = $('#slider6 ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider6').css({ width: slideWidth, height: slideHeight }); $('#slider6 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider6 ul li:last-child').prependTo('#slider6 ul'); function moveLeft() { $('#slider6 ul').animate({ left: + slideWidth }, 200, function () { $('#slider6 ul li:last-child').prependTo('#slider6 ul'); $('#slider6 ul').css('left', ''); }); }; function moveRight() { $('#slider6 ul').animate({ left: - slideWidth }, 200, function () { $('#slider6 ul li:first-child').appendTo('#slider6 ul'); $('#slider6 ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); 

  <div id="slider"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/mj_monitor1.png" alt=""></li> <li><img src="img/mj_monitor2.png" alt=""></li> <li><img src="img/mj_monitor3.png" alt=""></li> <li><img src="img/mj_monitor4.png" alt=""></li> <li><img src="img/mj_monitor5.png" alt=""></li> </ul> </div> <p class="dummy-text">Created in the Bootstrap framework with an assortment of jQuery. This particular website was my final project in University.</p> <p class="dummy-text">It was created for a Pianist who wanted a portfolio website for his work. In addition he also wanted to be able to sell his scores/albums/singles and advertise his concerts.</p> <p class="dummy-text">Unfortunatley the website was unfinished but gave a good idea of how it would have looked if finished. The full development process was recorded in my University blog for this module <a href="https://hghaznidmp.wordpress.com/"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> <p class="dummy-text">Visit the website <a href="http://www.fasttracklifeuk.co.uk/mj"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider2"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor2.png" alt=""></li> <li><img src="img/nlps_monitor3.png" alt=""></li> <li><img src="img/nlps_monitor4.png" alt=""></li> <li><img src="img/nlps_monitor5.png" alt=""></li> <li><img src="img/nlps_monitor6.png" alt=""></li> <li><img src="img/nlps_monitor7.png" alt=""></li> <li><img src="img/nlps_monitor8.png" alt=""></li> <li><img src="img/nlps_monitor9.png" alt=""></li> </ul> </div> <p class="dummy-text">The Nottingham Loves Paul Smith Project was a celeberation of 40 years of Paul Smith in Nottingham. A project I aqquired for a module at Nottingham Trent University. It was my job as project leader to design the brand, logos and website along with some of the poster work.</p> <p class="dummy-text">I worked closely with fashion and marketing proffesionals for consultantcy for the campaign.</p> <p class="dummy-text">The overall campaign consisted of videos, posters, a social media campaign and my website.</p> <p class="dummy-text">The website was produced in WordPress and was fully responsive. The final campaign was reviewed by a panel of design judges including Paul Smith's center before it was given the green light.</p> </div> <div> <div id="slider3"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/handh_monitor1.png" alt=""></li> <li><img src="img/handh_monitor2.png" alt=""></li> <li><img src="img/handh_monitor3.png" alt=""></li> <li><img src="img/handh_monitor4.png" alt=""></li> <li><img src="img/handh_monitor5.png" alt=""></li> </ul> </div> <p class="dummy-text">H&H is an international wholesale Tyre distributor based in Scotland, Glasgow.</p> <p class="dummy-text">I produced a responsive, WordPress e-commerce website using WooCommerce. I amended an existing Yell website they had made through Yells marketing team. It was a box standard brochure website with a poor aesthetic design.</p> <p class="dummy-text">The client wanted a booking system for car/tyre services and shop page for their new tyre range 'Sportrak' with a shiny new look.</p> <p class="dummy-text">Overall the product was successful. It hit every requirement the client wanted and produced successful enquiries from day one of launch.</p> <p class="dummy-text">Visit the website <a href="http://www.handhtyres.com"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider4"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">Crazy Cricket was a fun project I did in my final year of University. We had 3 hours to produce a brand and set of products with a multi-disciplined team of students for children learning to play cricket.</p> <p class="dummy-text">I produced a simple HTML5/JavaScript website using Notepad on University computers.</p> <p class="dummy-text">Time was the real factor here and we had to make every minute, every decision and every under-taking count.</p> <p class="dummy-text">I produced a simple HTML 5 page with a JavaScript trivia quiz.</p> <p class="dummy-text">Visit Work Journal <a href="https://hghaznidmp.wordpress.com/"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> <p class="dummy-text">Visit the Website <a href="http://www.hghazni.com/cc"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div id="slider5"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">A Nutraceutical startup approached me to design a new brand identity for late 2016 for their impending launch. They planned to sell suplements and vitamins on their new soon-to-be e-commerce website.</p> <p class="dummy-text">After speaking to the client I got a good unsterstanding of what aesthetic and image they were after. After some research I produced some mock-up sketches to which the below they chose.</p> <div class="dummy-img"><img src="img/alca_sketch.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">I began working with the above sketch in Illustrator to produce several veriations. Ending up with the version below.</p> <div class="dummy-img"><img src="img/alca.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">I was happy and the client was happy. A job well done.</p> </div> <div> <div id="slider6"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="img/hgv3_monitor.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> <li><img src="img/nlps_monitor1.png" alt=""></li> </ul> </div> <p class="dummy-text">So after further developing my Creative Front-end Dev skills I felt I could produce a much stronger portfolio website to the one I currently had. So I went about researching a new aesthetic. I like having powerful landings for the user to see right off the bat. I wanted to try a beautiful gradient background this time.</p> <p class="dummy-text">The other major considerations I had was that I wanted to design the entire website mobile first so that it would be far easier to scale going up to higher resolutions. To do that I followed <a style="color:#116e96;" href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Web Design Methodology</a> which allows me a good amount of flexbility when re-arranging my website for different resolutions/break-points.</p> <p class="dummy-text">Though I love Bootstrap I wanted to try a few new frameworks in this version of my portfolio. So I enlisted the aid of <a style="color:#116e96;" href="https://daneden.github.io/animate.css/">Animated.css</a>, <a style="color:#116e96;" href="http://mynameismatthieu.com/WOW/">WoW.js</a> and <a style="color:#116e96;" href="http://fontawesome.io/icons/">Font-awesome Icons.</a></p> <p class="dummy-text">I felt overall it turned out quite well and became extremely responsive but I think after this learning experience I'll definitley be going back to Bootstrap. I think the next version of this portfolio will be designed fully in SASS.</p> <p class="dummy-text">Visit the Website <a href="http://www.hghazni.com"><span style="color: #116e96; font-weight: bold;">here.</span></a></p> </div> <div> <div class="dummy-img"><img src="img/thoughtnova_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">A logo I designed for my old design company that I used to collaborate with other designers for joint projects.</p> <p class="dummy-text">I designed this particular logo in Adobe Illustrator in 2012.</p> </div> <div> <div class="dummy-img"><img src="img/iosis_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">A health and beauty company that wanted a new brand and website for their budding business.</p> <p class="dummy-text">We mocked up many ideas and though the above logo was not chosen it was one of my favourites for its simplicity and class. Designed in Adobe Illustrator in 2014.</p> <p class="dummy-text">Below are some of the earliest versions of the logos that I designed for the brand.</p> <div class="dummy-img"><img src="img/iosis_logo_designs.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Once the client had decided on the right logo for them I further developed colour schemes as per their request.</p> <div class="dummy-img"><img src="img/IOSIS_logo_different_colours.jpg" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Overall it was a fun and interesting project/industry to work in.</p> </div> <div> <div class="dummy-img"><img src="img/lp_monitor.png" style="width: 100%; auto: 100%;"/></div> <p class="dummy-text">Another design agency logo I designed in 2013 using Adobe Illustrator and Photoshop.</p> </div> <span class="loading"></span> <span class="icon close-content"></span> </div> </section> </div> <div class="contact-cont"> <div id="contact" class="contact"> <h1>Get in touch</h1> <span></span> <p> If you're interested in getting a new project off the ground or if you need a Creative Front-end Web Developer click the button below! I'll be in touch as soon as possible. </p> <img src="img/hg_avatar.png" alt="" /> <div id="buttons"> <a href="mailto:hghazni@gmail.com" class="btn blue">Contact Me</a> </div> </div> </div> <div class="footer-cont"> <div class="footer"> <ul class="footer-left"> <li><a href="https://twitter.com/haroonghazni"><i class="fa fa-twitter wow animated fadeInUp" aria-hidden="false"></i></a></li> <li><a href="https://codepen.io/hghazni/"><i class="fa fa-codepen wow animated fadeInUp" aria-hidden="true"></i></a></li> <li><a href="https://github.com/hghazni"><i class="fa fa-github wow animated fadeInUp" aria-hidden="true"></i></a></li> </ul> <div class="footer-right"> <ul> <li class="wow animated fadeInUp">Copyright © 2016. <a href="#">Haroon Ghazni</a></li> <li class="wow animated fadeInUp">|</li> <li class="wow animated fadeInUp">Nottingham Based - 07545 850 764</li> <li><a href="#home"><i id="arrowup" class="fa fa-chevron-circle-up wow animated fadeInUp" aria-hidden="true"></i></a></li> </ul> </div> <div class="mob-footer"> <p> Copyright © 2016. <a href="#"> Haroon Ghazni</a> </p></div><br> <div class="arrowupmob"> <a href="#home"><i class="fa fa-chevron-circle-up wow animated fadeInUp" aria-hidden="true"></i></a> </div> </div> </div> </div> <script src="js/classie.js"></script> <script src="js/helper.js"></script> <script src="js/grid3d.js"></script> <script src="js/pslider.js"></script> <script> new grid3D( document.getElementById( 'grid3d' ) ); </script> <script src="js/script.js"></script> <script src="js/wow.js"></script> <script> new WOW().init(); </script> </body> </html> 

Answer 1

I figured it out, I had the jQuery link at the top in the section. Put it at the bottom and it was working fine. I have no idea how that happened! It's always the little things :)