Grow your CSS skills. Land your dream job.

Anythingslider Style nav buttons

  • # December 6, 2012 at 2:38 pm

    I am using Anythingslider on my jsp page. It is working fine. But I want the nav buttons to appear at a fixed position. Right now they are being displayed to sides of the slide. Depending on the slide’s with and height they appear at different places within the slider window. But I want tehm to attach tot he slider window(div) at a fixed position instead of attaching to the slide.

    Here is my code:

    css:

    #container-page {
    margin: 0 auto;
    width: 797px;
    background: url(../images/back-cont.gif) repeat-y;
    }

    #container-content {
    margin: 0 auto; /* padding: 20px 0 40px 0;*/
    padding: 0 0 0 0;
    width: 797px;
    background: url(../images/back-foot.gif) no-repeat bottom;
    }
    #contentslider {
    width: 765px;
    height: 500px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: auto;
    text-align:center;
    }

    #contentslider ul {
    width: 765px;
    height: 500px;
    margin:0px;
    padding:0px;
    border: 0px;
    text-align:center;
    }

    #contentslider li {
    margin:0px;
    padding:0px;
    border: 0px;
    }

    .gotoslide {
    border:1pt solid #d0d0d0;
    }

    .currentslide {
    border:1pt solid #ff0000 ;

    }

    ===========
    Javascript:

    // Set up Sliders
    // **************
    jQuery(document).ready(function($){
    jQuery(‘#contentslider ul’).anythingSlider({

    delay : 5000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
    expand : false, // If true, the entire slider will expand to fit the parent element
    hashTags : false, // Should links change the hashtag in the URL?
    resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
    mode : ‘f’,
    buildNavigation : false, // If true, builds a list of anchor links to link to each panel
    buildStartStop : true, // If true, builds the start/stop button
    // buildArrows: true,
    // Function
    // enableArrows : true, // if false, arrows will be visible, but not clickable.
    // enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
    enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously “enablePlay”
    //appendControlsTo: $(‘#nav_slider’),
    enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
    toggleControls : false,
    toggleArrows :false,
    autoPlay : true, // If true, the slideshow will start running; replaces “startStopped” option
    easing : ‘easeInOutBack’,
    onSlideComplete: function(slider) {
    $(‘.gotoslide’)
    .removeClass(‘currentslide’)
    .eq(slider.currentPage – 1)
    .addClass(‘currentslide’);
    }
    });
    // Slide navigation.
    $(“.gotoslide”).click(function() {
    var id = parseInt($(this).attr(‘id’));
    var slide_no = id + 1;
    $(‘#contentslider ul’).anythingSlider(slide_no);
    $(“#slidercontrols > div”).removeClass(“currentslide”);
    $(this).addClass(“currentslide”);
    return false;
    });

    });

    Thanks in advance

    # December 6, 2012 at 6:28 pm

    Could you please [update this demo](http://jsfiddle.net/ycUB6/3243/) (I modified the css a bit) to include your HTML. Thanks!

    # December 10, 2012 at 5:15 pm

    Hi Mottie,
    I updated the demo. I have slides of different size. So the default nav buttons that are attached to the slide are taking different places depending on the size of the slide. I want the nav buttons to be at a fixed position in separate div from contentslider div .

    # December 11, 2012 at 11:53 am

    http://jsfiddle.net/ycUB6/3350/

    To the javascript
    $(‘.go-back’).click(function(){alert(“in back”);
    $(‘#contentslider’).data(‘AnythingSlider’).goBack();
    return false;
    });

    $(‘.go-forward’).click(function(){alert(“in forward”);
    $(‘#contentslider’).data(‘AnythingSlider’).goForward();
    return false;

    });

    # December 11, 2012 at 3:23 pm

    http://jsfiddle.net/ycUB6/3355/

    # December 14, 2012 at 9:57 am

    Hi kotha!

    Sorry for taking so long to respond. I [updated your demo](http://jsfiddle.net/Mottie/ycUB6/3413/)

    Basically, I changed the following:

    * Since the `resizeContents` option was `false` the img size needed to be set.
    * Added `position:relative` to the `#container-content` css and positioned the arrows within it.
    * Added `onInitialized` callback to set the navigation.
    * Changed the `onSlideComplete` to `onSlideBegin` callback so the navigation is updated before changing panels.
    * Updated the navigation images to sort of match the panel images.

    From your original post, I thought that the panels would all be different sizes. I wasn’t sure what you meant so instead of the default arrow position using `top: 50%;`, I switched it to `top: 250px;` so that the arrows would always be in the same place, no ignoring the height of the slider.

    I hope that is what you wanted.

    # December 14, 2012 at 11:54 am

    Hi Mottie,
    Thankyou for your reply.
    I tried the javascript changes, OnInitialized and changing OnslideComplete to OnSlideBegin functionality. But the left and right navigation arrows are not working.

    # December 15, 2012 at 10:17 am

    Oops, I forgot a few things:

    1. To comment out the append arrows to options since you already have images there

    //appendForwardTo: $(“.go-forward”),
    //appendBackTo: $(“.go-back”),

    2. To stop the arrows from being created in the first place by setting the buildArrows option:

    buildArrows: false,

    3. Moved the arrows out from under the slider by making the positioning negative:

    .go-back { left: -20px; }
    .go-forward { right: -20px; }

    4. Target the UL, it was just `#contentslider` before, for the go forward and go back scripts to access the API

    $(‘#contentslider ul’).data(‘AnythingSlider’).goBack();

    Here is an updated demo](http://jsfiddle.net/Mottie/ycUB6/3423/) with text arrows along with the images since chrome doesn’t add the image alt.

    # December 17, 2012 at 11:41 am

    Targeting the contentslider ul instead of contentslider made the trick and the navigation arrows work.
    Another small glitch.
    My content slider is of 765px width. when I have a slide of width 765px, the slide is being pushed a little bit to the right. I am assuming that this is space kept for left navigation arrow. As I using my custom arrows outside the contentslider div, how can I make sure this space is also available for the slide.

    # December 18, 2012 at 11:19 am

    I changed the anythingslider.css to not include padding so the space i mentioned in the previous comment is taken care of.

    # December 18, 2012 at 4:25 pm

    In the demo (http://jsfiddle.net/Mottie/ycUB6/3423/) , the fading of images is really smooth. I am using mode:fade and easing: easeInOutExpo on my application. The fading is not so good. Do you think it could be because I have slides of different size.

    Thanks in advance.

    # December 21, 2012 at 11:06 am

    Thank you so much for your reply. I had 2 more questions on the demo.
    Now for my nav buttons can I use css sprites technique.
    The issue is that the CSS needed to determine the position of the image requires an href. I believe the click on the slider is determined in javascript rather than an href actually on the page.

    The other question is the fade in out effect. I am using mode:f and easing:easeInOutExpo But it is not creating smooth fade in out effect.

    Thank you in advance

    # December 21, 2012 at 1:35 pm

    Hi Kotha!

    Of course you can use the sprite technique, that’s how all of the theme images are set up. You can always look inside of the anythingslider.css file to see it. If you need specific help, share some demo HTML/css with me in a jsFiddle, or something :)

    As for the cross fade issue, try downloading the latest version of the slider. I made a recent change to include the [css from this issue](https://github.com/CSS-Tricks/AnythingSlider/issues/447#issuecomment-10138661) to hopefully fix it for everyone!

    # January 10, 2013 at 10:59 am

    I am able to use the sprite technique. Also I moved the caption out of the slider and to a separate div as you explained in this forum https://css-tricks.com/forums/discussion/12180/anythingslider-caption/p1

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".