News/Image Slider for PHP Loop, (JS) Reset Interval on Click & Better Format for Unique ID's

Question

I'm currently setting up a news/image slider on my site via JS. I have the slide data rolling in through a PHP loop with unique ID's. Everything is working smoothly, I just can't figure out how to reset the timer/interval when you manually switch slides.

Also, there has to be a better/easier way to write the manual click navigation I currently have setup with all the unique ID's. I have the loop sliced at 5.

(my code is a mess)

$(document).ready(function(){
    $("#newsFeatured article:first").addClass("active");
    $("#newsFeatured li:first").addClass("active");
});

var toggleSlide = function(){
    $("#newsFeatured article.active").removeClass("active")
        .next().add("#newsFeatured article:first").last().addClass("active");

    $("#newsFeatured li.active").removeClass("active")
        .next().add("#newsFeatured li:first").last().addClass("active");
}
setInterval(toggleSlide, 8000);

$(document).ready(function(){
    $("#control1").on('click', function() {
        $("#slide1").addClass("active");
        $("#slide2, #slide3, #slide4, #slide5").removeClass("active");
        $("#control1").addClass("active");
        $("#control2, #control3, #control4, #control5").removeClass("active");
        clearInterval(toggleSlide);
    });
    $("#control2").on('click', function() {
        $("#slide2").addClass("active");
        $("#slide1, #slide3, #slide4, #slide5").removeClass("active");
        $("#control2").addClass("active");
        $("#control1, #control3, #control4, #control5").removeClass("active");
    });
    $("#control3").on('click', function() {
        $("#slide3").addClass("active");
        $("#slide1, #slide2, #slide4, #slide5").removeClass("active");
        $("#control3").addClass("active");
        $("#control1, #control2, #control4, #control5").removeClass("active");
    });
    $("#control4").on('click', function() {
        $("#slide4").addClass("active");
        $("#slide1, #slide2, #slide3, #slide5").removeClass("active");
        $("#control4").addClass("active");
        $("#control1, #control2, #control3, #control5").removeClass("active");
    });
    $("#control5").on('click', function() {
        $("#slide5").addClass("active");
        $("#slide1, #slide2, #slide3, #slide4").removeClass("active");
        $("#control5").addClass("active");
        $("#control1, #control2, #control3, #control4").removeClass("active");
    });
});

https://jsfiddle.net/aor1xmb5/

Lastly, i'm interested in getting my slide to interact with touch for mobile devices, if anyone can point me in the direction of a good tutorial on getting that started.

Thanks!

It would be nice to have an example of produced HTML output. — halfzebra, Jul 19 '15 at 16:42

score 1 · Accepted Answer · edited May 23 '17 at 10:30

Clearing intervals is fairly simple:

function myFn() {console.log('idle');}

var myTimer = setInterval(myFn, 4000);

// Then, later at some future time, 
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);

Please check the snippet:

$(function() {
  
  $("#newsFeatured article:first").addClass("active");
  $("#newsFeatured li:first").addClass("active");

  var sliderInterval = setInterval(toggleSlide, 8000);

  $('.featuredControls').on('click', 'li', function() {

    var $this = $(this),
      id = $this.attr('id'),
      index = id.replace('control', '');

    slideTo(index);

    // Clear interval.
    clearInterval(sliderInterval);
    sliderInterval = setInterval(toggleSlide, 8000);
  });

  function slideTo(index) {

    var id = '#control' + index,
      $this = $(id);

    // Highlight active slide.
    $(".featuredSlide").removeClass("active");
    $("#slide" + index).addClass("active");

    // Highlight active control.
    $this.parent().find('li').removeClass("active");
    $this.addClass("active");
  }

  function toggleSlide() {

    // Get current slide.
    var id,
      index,
      $next = $(".featuredControls .active").next();

    // If last item, start over.
    if ($next.length === 0) {
      $next = $(".featuredControls li").first();
    }

    id = $next.attr('id'),
      index = id.replace('control', '');

    slideTo(index);
  };
});

/* NEWS FEATURED SLIDER */
 #newsFeatured {
    position: relative;
    height: 300px;
    transition: 0.1s all linear;
}
#newsFeatured:hover {
    box-shadow: -6px 0px 0px 0px #ffc60d;
}
.featuredControls {
    opacity: 0;
    position: absolute;
    list-style-type: none;
    right: 30px;
    margin: 0;
    padding: 20px;
    z-index: 1;
    transition: 0.2s all linear;
}
#newsFeatured:hover .featuredControls {
    opacity: 1;
    right: 0;
}
.featuredControls li {
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    height: 20px;
    width: 15px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}
.featuredControls li.active {
    background: #ffc60d;
}
.featuredSlide {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
#newsFeatured:hover .featuredSlide {
    box-shadow: -1px 0px 0px 0px #101415;
}
#newsFeatured article.active {
    display: block;
}
.featuredImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: 0.3s all ease;
    animation: featuredImage ease 1;
    animation-duration: 1s;
}
@keyframes featuredImage {
    from {
        opacity: 0;
        background-position: 30% 50%;
    }
    to {
        opacity: 1;
        background-position: 50% 50%;
    }
}
.featuredContent {
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    bottom: 0;
    transition: 0.5s all ease;
}
.featuredContent h2 {
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    animation: featuredTitle ease 1;
    animation-duration: 1s;
}
@keyframes featuredTitle {
    from {
        padding-left: 75px;
        opacity: 0;
    }
    to {
        padding-left: 0;
        opacity: 1;
    }
}
.featuredContent h2 a {
    color: #ffc60d;
    margin: 0 0 5px 0;
    transition: 0.1s all linear;
}
#newsFeatured:hover .featuredContent h2 a {
    color: #eee;
}
.featuredContent section {
    color: #a7a397;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='newsFeatured' class='ipsClearfix'>
  <ul class='featuredControls'>
    <li id='control1'></li>
    <li id='control2'></li>
  </ul>
  <article id='slide1' class='featuredSlide'>
    <a href=''>
      <div class='featuredImage' style='background-image: url(http://i.imgur.com/udTA5il.jpg);'></div>
    </a>

    <div class='featuredContent'>
      <h2>
            <a href="">First Slide Title</a>
           </h2>

      <section class='ipsType_normal ipsType_richText ipsType_break'>First slide description.</section>
    </div>
  </article>
  <article id='slide2' class='featuredSlide'>
    <a href=''>
      <div class='featuredImage' style='background-image: url(http://i.imgur.com/SWy0AHZ.jpg);'></div>
    </a>

    <div class='featuredContent'>
      <h2>
            <a href="">Second Slide Title</a>
           </h2>

      <section class='ipsType_normal ipsType_richText ipsType_break'>Second slide description.</section>
    </div>
  </article>
</div>

It works! The only thing thing missing is adding the active class to the controls on manual navigation. The automatic interval adds the class to them just fine. — Revast, Jul 19 '15 at 17:25
@Revast I have updated my snipped again, the slider now can loop the slides. — halfzebra, Jul 19 '15 at 18:09

News/Image Slider for PHP Loop, (JS) Reset Interval on Click & Better Format for Unique ID's

1 Answers1