Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Anythingslider Style nav buttons

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #41206
    kotha
    Member

    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

    #116559
    Mottie
    Member

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

    #116777
    kotha
    Member

    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 .

    #116867
    kotha
    Member

    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;

    });

    #116894
    kotha
    Member
    #117404
    Mottie
    Member

    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.

    #117441
    kotha
    Member

    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.

    #117525
    Mottie
    Member

    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.

    #117794
    kotha
    Member

    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.

    #117930
    kotha
    Member

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

    #117969
    kotha
    Member

    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.

    #118416
    kotha
    Member

    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

    #118459
    Mottie
    Member

    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!

    #120529
    kotha
    Member

    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)
  • The forum ‘Other’ is closed to new topics and replies.