Slider without buttons - pre/next li triggers the slide

Question

I'm trying to get a carousel with previous/next actions triggered by the actual prev/next slide.

I could get it to work, but I'd like the slides to move with animated transition. All I could figure out was a fadeIn/FadeOut effect, which doesn't quite cut it.

Is there somethig you could suggest me as to smoothly move the .prev/.next > .main after I click .prev/.next?

HTML:

<div class="view">
                <ul>
                    <li class="prev" data-id="1">first

                    </li><!--
                    --><li class="main" data-id="2">second

                    </li><!--
                    --><li class="next" data-id="3">third

                    </li><!--
                    --><li data-id="4">fourth

                    </li><!--
                    --><li data-id="5">fifth

                    </li>
                </ul>
            </div>

CSS:

.view {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.view ul {
    list-style-type: none;
    display: block;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.view ul li {
    display: inline-block;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
    padding: 0;
    background: white;
    border: 2px solid #ccc;
}

.view ul li:hover {
    border-color: #75B5FF;
}

.view ul li.main {
    top: -5%;
}

.view ul li.prev {
    height: 75%;
    margin-right: -5%;
    margin-left: -75%;
    top: 5%;
}

.view ul li.next {
    height: 75%;
    margin-left: -5%;
}

jQuery:

$('body').on('click', 'li.prev', function() {
    $("body").find( "li" ).eq( 2 ).removeClass("next")
    $(this).next().removeClass().addClass("next");
    $(this).removeClass().addClass("main");
    $(this).prev().removeClass().addClass("prev");

    var $this = $(this),
        callback = function() {
            $this.siblings(':last()').insertBefore($this).addClass("prev");
        };
    $this.fadeIn(100, callback).fadeIn(100);
}); 

$('body').on('click', 'li.next', function() {
    $("body").find( "li" ).eq( 1 ).removeClass("prev")
    $(this).prev().removeClass().addClass("prev");
    $(this).removeClass().addClass("main");
    $(this).next().removeClass().addClass("next");

    var $this = $(this),
        callback = function() {
            $this.siblings(':first()').insertAfter($this.siblings(':last()'));
        };
    $this.fadeOut(100, callback).fadeIn(100);
}); 

Here it is in extenso :

https://jsfiddle.net/mptjsybq/

--

Also, is there a way to give more margin-top to the .prev/.next li's? I'm trying, but it must be some kind of alignment that orders all the li's up to the highest one. I want the .main li to be positioned higher than the .prev/.next ones.

Answer 1

Using CSS transitions, this effect is easily possible.

The key is this line of code:

.view ul li {
    /* ... */
    transition: all 0.5s ease;
}

Of course, if you wanted to be extra nice to the browser, you could always do this instead:

.view ul li {
    /* ... */
    transition: margin-left 0.5s ease, margin-right 0.5s ease;
}

This way the browser only has to calculate for margin-left and margin-right , instead of all the properties.

Don't forget to remove the fadeIn and fadeOut from your jQuery!

Here is the demo at JSFiddle: https://jsfiddle.net/239pcojn/2/

CSS3 Transitions are an amazing spec which allows you to do all kinds of animations without JavaScript. You can look into the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 2

What you are asking is complicated to make, because there is a lot of things to consider.

Another option is to build the functionality you are looking for on top of an existing slider. Like this: http://jsfiddle.net/mmyp7n3j/2/

HTML:

<div id="container" style="width: 100%;overflow: hidden;">
    <div style="position:relative;width: 50%;margin: 0 auto;">
        <div id="slider" style="width: 100%;overflow: visible !important;">
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/01.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/02.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/03.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/04.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/05.jpg" alt="img" />
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function(){
    var sudoSlider = $("#slider").sudoSlider({
        continuous:true,
        prevNext: false,
        initCallback: function () {
            this.css("overflow", "visible");
        }
    });

    $("body").on("click", ".slide", function (e) {
        var slide = Number($(e.target).attr("data-slide"));
        sudoSlider.goToSlide(slide);
    });
});

(Disclaimer, I am the guy behind the plugin used).

You can find more documentation on the plugin website: http://webbies.dk/SudoSlider/