jQuery Slider - Fade active classes in and out

Vote count: 0

I'm trying to fade in and out active classes for slides in a slider, which I've done before, but can't seem to get working for the way this one is set up.

I've kind of got it working in the example below, but the slides are actually moving as well for some reason rather than just fading in/out.

JSFiddle:

http://ift.tt/2lpVAlX

CSS:

#homeContent
{
background: red;
min-height: 100vh;
width: 100%;
}

#homeSlider
{
position: relative;
height: 65vh;
width: 100%;
display: flex;
align-items: center;
}

#homeSlider > .slide
{
height: 100%;
width: 100%;
display: none;
background-position: center center;
background-size: cover;
}

#homeSlider > .activeSlide
{
display: inline-block;
}

.slide > .slideContent
{
height: 100%;
width: 100%;
padding: 0 10%;
display: flex;
align-items: center;
}

.slideContent > h1
{
font-family: 'Bebas Neue Regular', sans-serif;
font-size: 45px;
width: 25%;
padding: 10px 20px;
background: rgba(227, 5, 19, 0.7);
line-height: 45px;
}

#homeSlider > #homeSliderNav
{
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#homeSliderNav > ul
{
margin: 0;
padding: 0;
}

#homeSliderNav > ul > li,
#homeSliderNav > ul > li:focus
{
background: transparent;
border: 2px solid #fff;
display: inline-block;
margin: 0 4px;
height: 10px;
width: 10px;
cursor: pointer;
transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
}

#homeSliderNav > ul > li:first-of-type
{
margin: 0 4px 0 0;
}

#homeSliderNav > ul > li:hover
{
background: #fff;
}

#homeSliderNav > ul > li.activeDot
{
background: #fff;
}

jQuery:

$(document).ready(function() {

var activeSlide = $('#homeSlider > .activeSlide');
var activeDot = $('#homeSliderNav > ul > li.activeDot');

$('#homeSliderNav > ul > li').click(function() {
  $('#homeSliderNav > ul > li').removeClass('activeDot');
  $(this).addClass('activeDot');

  $('.slide').fadeOut(200).removeClass('activeSlide');
  var slide = this.getAttribute('data-id');
  $('#' + slide).fadeIn(200).addClass('activeSlide');

});

})

asked 36 secs ago

Nick

Let's block ads! (Why?)

jQuery Slider - Fade active classes in and out