CODEWITHSUNDEEP
javascriptjqueryslider
NeedH8
NeedH8

Reputation: 482

How to stop/start looping sliders when mouse over the element?

Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.

$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
    setTimeout(function () {

        if (loop) {
          number = i%(quantity);
            $("label").removeClass('active');
            $("label:eq(" + number + ")").trigger("click").addClass('active');
            changeTo(i+1);
        }
    }, 2000);
}
changeTo(0);

$( "label" ).on( "mouseover", function() {
loop = false;
  $("label").removeClass('active');
  $(this).addClass('active').trigger('click');
}).on('mouseout', function(){
  loop = true;
});

});
* {
  box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
 font-family: 'PT Sans', sans-serif;
}
.slider--block {
  max-width: 670px;
  display: block;
  margin: auto;
  background: #fff;
}

.active {
  color: red;
}

.image-section {
  display: none;
}
.image-section + section {
  height: 100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  opacity: .33;
  transition: 400ms;
  z-index: 1;
}

.image-section:checked + section {
  opacity: 1;
  transition: 400ms;
  z-index: 2;
}

.image-section + section figcaption {
  padding: 20px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  max-width: 50%;

}

.image-window {
  height: 367px;
  width: 100%;
  position: relative;
  overflow:hidden;
}

.slider-navigation--block {
  display: flex;
  border:1px solid;
  background: #1D1D1D;
  padding: 5px;
  z-index: 3;
  position: relative;
}
.slider-navigation--block label {
  background: #2C2C2C;
  padding: 20px;
  color: #fff;
  margin-right: 7px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  border-radius: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  font-weight: 600;

}

.slider-navigation--block label.active:before {
  content: "";
  position: absolute;
   top: -11px;
   transform: rotate(-135deg);
   border: 12px solid;
   border-color: transparent #537ACA #537ACA transparent;
   left: calc(50% - 12px);
   }

.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);

  }

.slider-navigation--block label:last-child {
  margin-right: 0;
}
img {
  max-width: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
  <div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
  <figcaption>
Hello, world! This is awesometext...
  </figcaption>
  <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
  <input class="image-section" id="in-2" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext about something else...
    </figcaption>
    <img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
  </section>
  <input class="image-section" id="in-3" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext again about something else...
    </figcaption>
    <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
  </section>
</div>

<div class="slider-navigation--block">
  <label class="active" for="in-1">AION [ру-офф]</label>
  <label for="in-2">Perfect World [ру-офф]</label>
  <label for="in-3">Lineage 2 [ру-офф]</label>
</div>



  </div>
</div>

Upvotes: 0

Views: 38

Answers (1)

Justinw
Justinw

Reputation: 661

See this JSFiddle for a working example.

However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.

$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
    setTimeout(function () {

        if (loop) {
          number = i%(quantity);
            $("label").removeClass('active');
            $("label:eq(" + number + ")").trigger("click").addClass('active');
            changeTo(i+1);
        }
    }, 2000);
}
changeTo(0);

$( "label" ).on( "mouseover", function() {
loop = false;
  $("label").removeClass('active');
  $(this).addClass('active').trigger('click');
}).on('mouseout', function(){
  loop = true;
  changeTo(0)
});

});
* {
  box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
 font-family: 'PT Sans', sans-serif;
}
.slider--block {
  max-width: 670px;
  display: block;
  margin: auto;
  background: #fff;
}

.active {
  color: red;
}

.image-section {
  display: none;
}
.image-section + section {
  height: 100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  opacity: .33;
  transition: 400ms;
  z-index: 1;
}

.image-section:checked + section {
  opacity: 1;
  transition: 400ms;
  z-index: 2;
}

.image-section + section figcaption {
  padding: 20px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  max-width: 50%;

}

.image-window {
  height: 367px;
  width: 100%;
  position: relative;
  overflow:hidden;
}

.slider-navigation--block {
  display: flex;
  border:1px solid;
  background: #1D1D1D;
  padding: 5px;
  z-index: 3;
  position: relative;
}
.slider-navigation--block label {
  background: #2C2C2C;
  padding: 20px;
  color: #fff;
  margin-right: 7px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  border-radius: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  font-weight: 600;

}

.slider-navigation--block label.active:before {
  content: "";
  position: absolute;
   top: -11px;
   transform: rotate(-135deg);
   border: 12px solid;
   border-color: transparent #537ACA #537ACA transparent;
   left: calc(50% - 12px);
   }

.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);

  }

.slider-navigation--block label:last-child {
  margin-right: 0;
}
img {
  max-width: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
  <div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
  <figcaption>
Hello, world! This is awesometext...
  </figcaption>
  <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
  <input class="image-section" id="in-2" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext about something else...
    </figcaption>
    <img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
  </section>
  <input class="image-section" id="in-3" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext again about something else...
    </figcaption>
    <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
  </section>
</div>

<div class="slider-navigation--block">
  <label class="active" for="in-1">AION [ру-офф]</label>
  <label for="in-2">Perfect World [ру-офф]</label>
  <label for="in-3">Lineage 2 [ру-офф]</label>
</div>



  </div>
</div>

Upvotes: 1

Related Questions