3809

Why are not all images showing up in this slider?

Question:

Here is my code

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { var startSlider = function() { var startSlide = $(".slider li:first"); var nextSlide = $(".active").next("li"); $(".active").removeClass(); if(nextSlide.html() == null) { nextSlide = startSlide; } nextSlide.addClass("active"); setTimeout(startSlider, 1000); }; setTimeout(startSlider, 1000); }); </script> <style> .active{ display:none; } </style> </head> <body> <ul class="slider" style="list-style:none;"> <li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> <li><div style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> <li><div style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></li> <li><div style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> </ul> </body> </html>

When I run this code only blue and black divs show up again and again.What can be the posible reason for that? I tried to put active class at different position but it did not help.I removed the typo suggested in answer it was not in the original code and showed up only here.

Answer1:

Your script will set class="active" to one of the four divs at a time starting with the first div. Since this is the definition of active CSS class

<style> .active{ display:none; } </style>

The current div that have class="active" will disappear but the other three won't, and they're placed in the exact same position so only the darker colors can be seen, which are blue and black in this case.

I would suggest using two CSS classes as follows

<style> .active{ display:block; } .inactive{ display:none; } </style>

and changing your script to make one div have class="active" and the rest have class="inactive" at a time, meaning the active div will appear and the inactive divs will disappear.

<script> $(document).ready(function() { var startSlider = function() { var startSlide = $(".slider li:first"); var nextSlide = $(".active").next("li"); // remove css class from all divs $(".active").removeClass(); $(".inactive").removeClass(); if(nextSlide.html() == null) {nextSlide = startSlide;} // set nextSlide css class to active nextSlide.addClass("active"); // set the rest of the divs css class to inactive nextSlide.siblings().addClass("inactive"); setTimeout(startSlider, 1000); }; setTimeout(startSlider, 1000); }); </script>

Here's the complete code after making the changes above.

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { var startSlider = function() { var startSlide = $(".slider li:first"); var nextSlide = $(".active").next("li"); // remove css class from all divs $(".active").removeClass(); $(".inactive").removeClass(); if(nextSlide.html() == null) {nextSlide = startSlide;} // set nextSlide css class to active nextSlide.addClass("active"); // set the rest of the divs css class to inactive nextSlide.siblings().addClass("inactive"); setTimeout(startSlider, 1000); }; setTimeout(startSlider, 1000); }); </script> <style> .active{ display:block; } .inactive{ display:none; } </style> </head> <body> <ul class="slider" style="list-style:none;"> <li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> <li><div class="inactive" style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> <li><div class="inactive" style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> <li><div class="inactive" style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> </ul> </body> </html>

Here's the working jsfiddle: <a href="http://jsfiddle.net/k8qod5g0/" rel="nofollow">http://jsfiddle.net/k8qod5g0/</a>

Recommend

  • Android ViewPager skip page animation
  • Declaring functions inside arguments [duplicate]
  • CSS Bundling and Internet Explorer's Limit
  • html table selection with colspan or rowspan
  • clear interval doesn't work
  • Function to check if jquery plugins are already initialized
  • Limit the number of visible pages in pagination
  • Fading between images
  • Increasing dimensions on hover without changing the position of other elements
  • jQuery panel slider opens with button click but won't close
  • Seamless scrolling text
  • IE8 stops network access after 5 long polling request
  • How to keep button state across different pages?
  • setTimeOut and local function
  • Price range slider for my website
  • Get css animation property with jQuery
  • Keep transition effect on 1 div from moving the div that follows?
  • Python: sending key press events over SSH
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Play WS (2.2.1): post/put large request
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Using jQuery closest() method with class selector
  • Menu Color Fade on Hover with Jquery
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Jquery - Jquery Wysiwyg return html as a string
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • Linker errors when using intrinsic function via function pointer
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • How to set the response of a form post action to a iframe source?
  • LevelDB C iterator
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • How to Embed XSL into XML