Automating my slider

Question

I have an image slider with an hover effect build into my Website. (click here for my code: http://jsfiddle.net/Nctfa/).

HTML:

<div class="accordian">
<ul>
    <li>
        <div class="image_title">   <a href="#">TERA Online</a>

        </div>  <a href="#">
            <img src="http://spieletrend.com/screenshots/tera-release-termin.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Diablo 3</a>

        </div>  <a href="#">
            <img src="http://www.airbornegamer.com/wp-content/uploads/2013/08/diablo-3-HD-wallpaper-640x320.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Assassin's Creed</a>

        </div>  <a href="#">
            <img src="http://totalgame.es/wp-content/uploads/2013/09/Assassins-Creed-4-Black-Flag.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Grand Theft Auto V</a>

        </div>  <a href="#">
            <img src="http://b.vimeocdn.com/ts/448/977/448977532_640.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Battlefield 4</a>

        </div>  <a href="#">
            <img src="http://stickskills.com/omega/wp-content/uploads/2013/04/Battlefield4-e1366202710731.jpg"/>
        </a>

    </li>
</ul>

CSS:

* {
margin:0px;
padding:0px;
color:#fff;
}
.accordian {
    width: 805px;
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
    width: 2000px;
}
.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.accordian ul:hover li {
    width: 40px;
}
.accordian ul li:hover {
    width: 640px;
}
.accordian li img {
    display: block;
}
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

I want to automatically change the highlighted picture while i am not hovering it (like this: http://www.pixedelic.com/plugins/diapo/).

Is it possible, to do that without affecting the img tags at all?

Thanks, Thorkel

Answer 1

I think this is what you want: http://jsfiddle.net/BYossarian/Nctfa/28/

I'd suggest having a class (I've used shown) that rotates around your slides:

var ulElem = $('.accordian').find('ul');

function rotate() {

    var next = ulElem.find('.shown').removeClass('shown').next();

    if (next.length) {
        next.addClass('shown');
    } else {
        ulElem.find('li').eq(0).addClass('shown');
    }
}

// i just wrapped this in a setTimeout so the slides are briefly shown 
// equally spaced at the start, but you could just jump right into it
setTimeout(function () {
    ulElem.addClass('shown');
    ulElem.find('li').eq(0).addClass('shown');
    setInterval(rotate, 1800);
}, 1800);

But then using CSS to not only show the .shown element, but also to ignore the shown class when the ul element is being hovered over:

.accordian ul.shown:not(:hover) li {
    width: 40px;
}
.accordian ul:not(:hover) li.shown {
    width: 640px;
}

by using the :not selector:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

But note that :not won't work for IE6-8:

http://caniuse.com/css-sel3

So if you care about them, you'll need to use events to track the hover state.

Answer 2

EDIT/UPDATE:

Ok. So you want a script that change the picture like a carousel.

First you should do it in javascript, and for this you cannot use the pseudoclass :hover. It's better to use a simple class hover for example

.accordian ul.hover li {
    width: 40px;
}
.accordian ul li.hover {
    width: 640px;
}

Now you should use javascript in order to have the same effect.

function _hover() {
    $(this).addClass('hover'); 
    $(this).parent().addClass('hover');
}
function _out() {
    $(this).removeClass('hover'); 
    $(this).parent().removeClass('hover');
}

var $lis = $('.accordian ul li');
$lis.hover(_hover,_out);

Finally you can write a simple script that automatize the carousel. Something like that:

var index = 0;
setInterval(function() {
    $lis.removeClass('hover'); // remove previous hover
    $lis.parent().removeClass('hover');
    _hover.call($lis[index]); // set the jQuery element as context
    index = (index+1)%$lis.length; // increment or back to 0
},1400);

DEMO: http://jsfiddle.net/Nctfa/27/

Answer 3

Yes, There is a plugin for jQuery called hoverIntent that does what you describe.

This will solve your problem

moreover we can try to delay the hover effect using Delay

Check this demo fiddle using delay

like this

$('.accordian').hover(function(){
timeout = setTimeout(function(){
        $('.accordian').delay(200).css('color','red');
    }, 2000);    
});