Grow your CSS skills. Land your dream job.

stripped down slider for customizing

  • # April 29, 2012 at 4:42 pm

    Hi, I am trying to make a javascript slider from scratch so I can hopefully create my own custom slide effects and such like on the nivo and coin slider. Now I don’t know where to go with the javascript. I just need to know the bare-boned code that would make it easy to customize. Here is my code so far, does everything seem to be in order?

    html:
    I can’t seem to post my html for some reason, but all I have so far is an unordered list.

    css:
    #slide {
    position: relative;
    display: block;
    list-style: none;
    margin:0;
    padding:0;
    width: 570px;
    height: 270px;
    overflow: hidden;
    }

    #slide ul {
    position: relative;
    width: 570px;
    height: 270px;
    overflow: hidden;
    }

    Hopefully I was informative enough. Thanks in advance!

    # April 29, 2012 at 5:10 pm

    Hi there,

    You will be able to post your HTML in code tags, by pressing the button here:

    This way the HTML doesn’t get rendered.

    By the way, the CSS looks fine.

    # April 29, 2012 at 11:36 pm

    You need to post where you are with the HTML and JS. Otherwise, your request seems like you are asking us to do the work for you. Which is an uphill battle really. lol

    # April 29, 2012 at 11:36 pm

    Okay, thanks, didn’t see that button.

    < !DOCTYPE html>







    • 1

    • 2

    • 3

    • 4




    Now how should I go with the javascript? I just need something real basic, simple and easy to customize so I can add some of my own effects.

    # April 30, 2012 at 12:03 am

    Start with better semantics. The ul would not be the “slide” it would be the container or the thing that holds the slide. But I would call it slideshow so you know where it is all contained. The list items are better suited to be called slides.

    With that, I would also not put your height and width inline. There is no purpose if you are using an external stylesheet. So something like this:


















    Also, your current alt properties are irrelevant. If you are using those for indexing, you are better off just using a for loop or another way of finding an index.

    The easiest way I can think of building a slideshow would be to use CSS positioning to line up all of the images on top of each other. Using z-index as a way to keep order of what image is seen next and so on.

    As for the JS, I would using a timer function that removes the “current” class and adds that class to the next image in line. Then loop back to the first index once it reaches the end. During this changing, you would figure out your transition style, whether it be a fade or what ever, and you execute that transition. Once it is finished fading, use a reorder function that will give the image that is currently transitioning away the lowest z-index and all of the images need to be reordered so they will reflect their change in line. At this point, the next image will have the highest z-index as well as the “current” class.

    This was rather strange to explain. But, if you can understand that, you should be able to throw together a simple slideshow structure fast. I would do the research though. You will learn a lot studying other slideshow code.

    # April 30, 2012 at 12:11 am

    Thank you so much! I’ll make those changes later tomorrow and try to get that javascript going. I’ll let you know if I need any further help.

    # April 30, 2012 at 12:31 am

    No problem.

    # April 30, 2012 at 10:20 pm

    Alright, I ran into a snag. I believe I am doing the css right to stack the images on top of each other, but I think the problem is I am not probperly targeting it (or the problem could be completely different).

    Here is my code














    #slideshow {
    position: relative;
    display: block;
    list-style: none;
    top: 0px;
    left: 0px;
    margin:0;
    padding:0;
    width: 570px;
    height: 270px;
    }

    #slideshow ul {
    position: relative;
    top: 0px;
    left: 0px;
    width: 570px;
    height: 270px;
    }

    #slideshow ul li {
    position: absolute;
    top: 0px;
    left: 0px;
    float:left;
    list-style:none;
    z-index: 1000
    }

    #slideshow ul li.current {
    position: absolute;
    top: 0px;
    left: 0px;
    float:left;
    list-style:none;
    z-index: 9999
    }

    EDIT: AHH!! silly me. I put the ul in the li when I didn’t need it. But now I can’t figure out how to target the “current” class? Can someone help? Sorry I can’t figure something this simple, I am looking up how to do this as I speak.

    # May 1, 2012 at 12:28 am

    Are you trying to figure out how to target the “current” class with CSS?

    Also, with the javascript, you are going to have to change each li’s z-index based on its index. That way, you will not run into any possible positioning or indexing issues. Meaning, they will appear in the right order.

    # May 1, 2012 at 1:20 pm

    Yes, I am trying to target the “current” class. Sorry for not being more specific.

    Now what you’re saying in your second paragraph, is I have to have a class for each li? like “slide1″ “slide2″ etc, etc? To avoid indexing issues?

    # May 1, 2012 at 7:30 pm

    Sorry for double post.

    well, to keep you guys up to date, I found some js that is working for me, just have a few questions.

    $(document).ready(function() {

    //Execute the slideShow, set 4 seconds for each images
    slideShow(2000);

    });

    function slideShow(speed) {

    //Call the gallery function to run the slideshow
    window.setInterval('gallery()', 2000);

    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');


    //pause the slideshow on mouse over
    $('ul.slideshow').hover(
    function () {
    clearInterval(timer);
    },
    function () {
    timer = setInterval('gallery()',speed);
    }
    );

    }

    function gallery() {


    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

    //trying to avoid speed issue
    if(current.queue('fx').length == 0) {

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

    //Get next image caption
    var title = next.find('img').attr('title');
    var desc = next.find('img').attr('alt');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    //Hide the caption first, and then set and display the caption
    $('#slideshow-caption').slideToggle(300, function () {
    $('#slideshow-caption h3').html(title);
    $('#slideshow-caption p').html(desc);
    $('#slideshow-caption').slideToggle(500);
    });

    //Hide the current image
    current.animate({opacity: 0.0}, 1000).removeClass('show');

    }

    }

    first question is if you look at my li class, it say “current” their li class was “show”, so why is it still working even though the li class doesn’t match? I know it’s not a big deal just curious.

    Secondly, does this seem like some good, simple js? Or should I make some changes so it’s more efficient, streamline, and makes more sense?

    # May 2, 2012 at 2:54 am

    It usefull

    # May 2, 2012 at 11:29 pm

    Yes they are using the same idea with current but use the “show” class instead.

    To answer your question about why, even if the class is set to “current” and not “show”, it still works is simple.

    It’s all in their first line of the gallery() function:



    //this is their line
    var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));



    //that line is the simplified version of this

    if ( $('ul.slideshow li.show') ) {

    var current = $('ul.slideshow li.show');

    }else {

    var current = $('#ul.slideshow li:first')
    }

    So their code is saying, “Ok does a li with a class of ‘show’ exist inside a ul with a class of ‘slideshow’? If so, set our variable current to that object. If there is no such element, then make the variable current equal to the first li inside a ul with a class of ‘slideshow’.”

    Does that make since? So since it is not looking for the “current” class we mentioned in previous posts, then it doesn’t care about it at all. All it cares about is a li with a class of ‘show’ and if it can’t find it, it defaults to the first li.

    You may notice that if you add the show class to an image, that image will be the first in the slideshow.

    As far as the efficiency, you do not need to worry about it at this point. This code looks fine and if you worry about efficiency too early in your development, you will usually make your code hard to read and maintain in the long run. Just get what your task done first, then look for ways to improve it. That is a lesson most programmers (and others) learn the hard way.

    # May 3, 2012 at 2:31 am

    Alright, cool! I’m trying to improve it, using the same concept just playing around with it seeing what happens. But one quick question, how do I target the “current” class from the javascript? I know it still works but I’m just a little OCD on it :)

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".