Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Custom Element Rotate Help
    primarykey
    data
    text
    <p>Hey! I am trying to code a simple content/image rotating banner that I can click left or right arrows to rotate the content..</p> <p>I have everything coded and it works but in a very beginners way and would really appreciate a better, more robust way to do it.</p> <pre><code>jQuery("span.left-arrow").click(function() { var visible = jQuery("#home_slider .slide:visible").attr("id"); var slide1 = jQuery("#home_slider #slide1"); var slide2 = jQuery("#home_slider #slide2"); var slide3 = jQuery("#home_slider #slide3"); if (jQuery(visible == "slide1")) { jQuery("#home_slider #slide1:visible").fadeOut(function() { slide3.fadeIn(); }); } if (jQuery(visible == "slide2")) { jQuery("#home_slider #slide2:visible").fadeOut(function() { slide1.fadeIn(); }); } if (jQuery(visible == "slide3")) { jQuery("#home_slider #slide3:visible").fadeOut(function() { slide2.fadeIn(); }); } }); // right arrow jQuery("span.right-arrow").click(function() { var visible = jQuery("#home_slider .slide:visible").attr("id"); var slide1 = jQuery("#home_slider #slide1"); var slide2 = jQuery("#home_slider #slide2"); var slide3 = jQuery("#home_slider #slide3"); if (jQuery(visible == "slide1")) { jQuery("#home_slider #slide1:visible").fadeOut(function() { slide2.fadeIn(); }); } if (jQuery(visible == "slide2")) { jQuery("#home_slider #slide2:visible").fadeOut(function() { slide3.fadeIn(); }); } if (jQuery(visible == "slide3")) { jQuery("#home_slider #slide3:visible").fadeOut(function() { slide1.fadeIn(); }); } }); </code></pre> <p>Thanks for the help!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload