I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.[*]As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.Please help to resolve the isse and let me know if more detail is required.Sorry I tried to add the html, css and jquery code but i was encountering error.Can you please suggest how what changes I should make to the js : slides.min.jquery.jsso that it renders my second slider with css content:\[code\]<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Demo</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/13838239/css/new.css"> <link rel="stylesheet" href="http://stackoverflow.com/questions/13838239/css/text.css"> <script src="http://stackoverflow.com/questions/13838239/js/slider/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/13838239/js/slider/slides.min.jquery.js"></script> <script src="http://stackoverflow.com/questions/13838239/js/slider/slider.text.jquery.js"></script> <script> $(function(){ // Set starting slide to 1 var startSlide = 1; // Get slide number if it exists if (window.location.hash) { startSlide = window.location.hash.replace('#',''); } // Initialize Slides 1 $('#slides1').slides({ preload: true, preloadImage: 'img/slider/loading.gif', generatePagination: true, play: 5000, pause: 2500, hoverPause: true, // Get the starting slide start: startSlide, animationComplete: function(current){ // Set the slide number as a hash window.location.hash = '#' + current; } }); // Initialize Slides 2 $('#slides2').slides({ preload: true, preloadImage: 'img/slider/loading.gif', generatePagination: true, play: 5000, pause: 2500, hoverPause: true, // Get the starting slide start: startSlide, animationComplete: function(current){ // Set the slide number as a hash window.location.hash = '#' + current; } }); }); </script><div id="container"> <div id="example"> <div id="slides1"> <div class="slides_container"> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide"> <div class="tmpSlideCopy"> <h1>A History of Innovation</h1> <p>SLIDE 1 </p> </div> </div> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide"> <div class="tmpSlideCopy"> <h1>Second Slide</h1> <p>Slide 2</p> </div> </div> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide"> <div class="tmpSlideCopy"> <h1>Third Slide</h1> <p>Slide 3</p> </div> </div></div><a href="http://stackoverflow.com/questions/13838239/#" class="prev"><img src="http://stackoverflow.com/questions/13838239/img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a><a href="http://stackoverflow.com/questions/13838239/#" class="next"><img src="http://stackoverflow.com/questions/13838239/img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>\[/code\]
cheerspam
and try to implement two slider on a page. I am customising the Linking demo.[*]As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.Please help to resolve the isse and let me know if more detail is required.Sorry I tried to add the html, css and jquery code but i was encountering error.Can you please suggest how what changes I should make to the js : slides.min.jquery.jsso that it renders my second slider with css content:\[code\]<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Demo</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/13838239/css/new.css"> <link rel="stylesheet" href="http://stackoverflow.com/questions/13838239/css/text.css"> <script src="http://stackoverflow.com/questions/13838239/js/slider/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/13838239/js/slider/slides.min.jquery.js"></script> <script src="http://stackoverflow.com/questions/13838239/js/slider/slider.text.jquery.js"></script> <script> $(function(){ // Set starting slide to 1 var startSlide = 1; // Get slide number if it exists if (window.location.hash) { startSlide = window.location.hash.replace('#',''); } // Initialize Slides 1 $('#slides1').slides({ preload: true, preloadImage: 'img/slider/loading.gif', generatePagination: true, play: 5000, pause: 2500, hoverPause: true, // Get the starting slide start: startSlide, animationComplete: function(current){ // Set the slide number as a hash window.location.hash = '#' + current; } }); // Initialize Slides 2 $('#slides2').slides({ preload: true, preloadImage: 'img/slider/loading.gif', generatePagination: true, play: 5000, pause: 2500, hoverPause: true, // Get the starting slide start: startSlide, animationComplete: function(current){ // Set the slide number as a hash window.location.hash = '#' + current; } }); }); </script><div id="container"> <div id="example"> <div id="slides1"> <div class="slides_container"> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide"> <div class="tmpSlideCopy"> <h1>A History of Innovation</h1> <p>SLIDE 1 </p> </div> </div> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide"> <div class="tmpSlideCopy"> <h1>Second Slide</h1> <p>Slide 2</p> </div> </div> <div class="slide"> <img src="http://stackoverflow.com/questions/13838239/img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide"> <div class="tmpSlideCopy"> <h1>Third Slide</h1> <p>Slide 3</p> </div> </div></div><a href="http://stackoverflow.com/questions/13838239/#" class="prev"><img src="http://stackoverflow.com/questions/13838239/img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a><a href="http://stackoverflow.com/questions/13838239/#" class="next"><img src="http://stackoverflow.com/questions/13838239/img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>\[/code\]
cheerspam