How can I add fade effect to my jquery slider?

Question

I've been using this slider that I've whittled down to exactly what I need. Now I'm trying to add a fade effect between slides. I'm still learning jquery, specifically the var function. Here's the code that's at play:

JQUERY

(function ($) {

$(function () {
    var currentIndex = 0,
        items = $('.unique-slider div'),
        itemAmt = items.length;
    function cycleItems() {
        var item = $('.unique-slider div').eq(currentIndex);
        items.hide();
        item.css('display', 'inline-block');
    }

    var autoSlide = setInterval(function () {
            currentIndex += 1;
            if (currentIndex > itemAmt - 1) {
                currentIndex = 0;
            }
            cycleItems();
        }, 3000);

    $('#right').click(function () {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    });
    $('#left').click(function () {
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
});

})(jQuery);

HTML

<section class='slider-body'>          
    <div id='left' class='arrows'>
        <img src='/wp-content/uploads/2017/01/left.png'>
    </div>
    <div id='right' class='arrows'>
        <img src='/wp-content/uploads/2017/01/right.png'>
    </div>        
    <div class='slider unique-slider'>
        <div class='slide' style='display: inline-block;'>
            <img class='img-slide' src='SOURCE'/>
        </div>
        <div class='slide'>
            <img class='img-slide' src='SOURCE'/>
        </div>            
    </div>
</section>

CSS

.slider-body {
position: relative;
width: auto;
overflow: hidden;
}

.slider {
    position: relative;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.slider div {
    display: inline-block;
    display: none;
    background-color: white;
    width: 100%;
}

.slide {
    height: 100%;
}

.img-slide {
    position: relative;
    margin: 0 auto;
    height: 100vh;
}

#test-right,
#right {
    right: 5px;
    padding-left: 5px;
}

#test-left,
#left {
    left: 5px;
    padding-right: 5px;
}

.arrows {
    z-index: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #ffffff;
    opacity: 0.7
}

Have you looked at a CSS solution? It might work for your situation: http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — Aaron Belchamber, Mar 27 '17 at 12:24
Interesting. And this would activate every time a new slide was applied - no matter if a button was clicked or not? Rather than using an id, could I do a class such as .slide in this example? — Troy Riemer, Mar 27 '17 at 13:59

spickywolf · Answer 1 · 2017-03-27T14:11:15.153

$(function () {
    var currentIndex = 0,
        items = $('.unique-slider div'),
        itemAmt = items.length;
    function cycleItems() {
        var item = $('.unique-slider div').eq(currentIndex);
        items.hide();
        item.css('display', 'inline-block');
        item.addClass('fade');
    }

    var autoSlide = setInterval(function () {
            currentIndex += 1;
            if (currentIndex > itemAmt - 1) {
                currentIndex = 0;
            }
            cycleItems();
        }, 3000);

    $('#right').click(function () {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    });
    $('#left').click(function () {
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
});

.slider-body {
position: relative;
width: auto;
overflow: hidden;
}

.slider {
    position: relative;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.slider div {
    display: inline-block;
    display: none;
    background-color: white;
    width: 100%;
}

.slide {
    height: 100%;
}

.img-slide {
    position: relative;
    margin: 0 auto;
    height: 100vh;
}

#test-right,
#right {
    right: 5px;
    padding-left: 5px;
}

#test-left,
#left {
    left: 5px;
    padding-right: 5px;
}

.arrows {
    z-index: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #ffffff;
    opacity: 0.7
}
.fade{
    animation : 2s ease-out blur;
}
@keyframes blur{
5%{
-webkit-filter: blur(5px); /* Safari */
opacity :0;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='slider-body'>          
    <div id='left' class='arrows'>
        <img src='/wp-content/uploads/2017/01/left.png'>
    </div>
    <div id='right' class='arrows'>
        <img src='/wp-content/uploads/2017/01/right.png'>
    </div>        
    <div class='slider unique-slider'>
        <div class='slide' style='display: inline-block;'>
            <img class='img-slide' src='https://i.ytimg.com/vi/VDrhg-wSOdQ/hqdefault.jpg'/>
        </div>
        <div class='slide'>
            <img class='img-slide' src='https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg'/>
        </div>            
    </div>
</section>

$(document).ready(function(){
$('#bt').on('click',function(){
$('')
$('.fade').html('<img height="50" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">').hide().fadeIn(1000);
});

});

img {
    animation : 2s ease-out blur;
}
@keyframes blur{
5%{
-webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
     -webkit-filter: brightness(200%); /* Safari */
    filter: brightness(200%);
    margin-left :30%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bt">fade in</button>
<hr />
<div class="fade"></div>

$(document).ready(function(){
$('#bt').on('click',function(){
$('.fade').html('<img height="50" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">').hide().fadeIn(1000);
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bt">fade in</button>
<hr />
<div class="fade"></div>

How would this work with the auto slide function that I'm currently using? — Troy Riemer, Mar 27 '17 at 13:55

How can I add fade effect to my jquery slider?

1 Answers1