Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After initialisation everything is shifted to the right #100

Open
DizzyBHigh opened this issue Oct 12, 2012 · 7 comments
Open

After initialisation everything is shifted to the right #100

DizzyBHigh opened this issue Oct 12, 2012 · 7 comments

Comments

@DizzyBHigh
Copy link

Hi there.

Love the slider but am having an issue.

i can set the start panel to 3 but if i do that the indicator of what panel am on is the 3rd one along (this is indeed the correct behaviour)

I would like the first slide to be displayed in the middle (startpanel set to 1) with the indicator showing as the first slide.

when i do this the last panel; is shown bu the selected panel is posistioned too the right, so it gives the effect of their only being 2 panels at the start...

you can see what i mean here (sorry i dont really know how to create this in jsfiddle)
http://www.display-innovations.com/displays/6-17_digital%20-%20newslider.php
anyhelp would be graetly appreciated.

thanks for your time.

@beshur
Copy link

beshur commented Oct 12, 2012

Hello DizzyBHigh.

As I understand you want to make an infinite slider?

Something like this:
http://jsfiddle.net/beshur/mNYxQ/
You can just set the 'wrap' parameter to 'true'.

@DizzyBHigh
Copy link
Author

hi i have the wrap parameter set to true, and if i click the arrows it is infinite.

just on initialisation when the start panel parameter is set to 1 the last slide appears in the middle (on he small state)
and the 1st panel appears to the right, large version , with no panel before on the left (it shows 3 panels at a time)
I am assuming the 3rd panel is actually showing but it is hidden as the whole thing when loaded appears shifted to the right.

Did you look at the link i gave you?

@Mottie
Copy link
Contributor

Mottie commented Oct 12, 2012

Actually I was just looking at this. I think the reason the panels are off is because the img inside the panel has a set width which is slightly bigger than the panel size. The panels are set at 192px in width while the image inside is set to 200px. If you increase the panel size to 200px it should fix the problem.

@DizzyBHigh
Copy link
Author

hmmm i had a look in the css, and there is no width set for the panel.
i added a width to this and still no change:

the css is currently like this and still no change...

/*** Slider panel ***/
.mb-slider .mb-panel {
    margin: 0;
    padding: 2px;
    display: block;
    cursor: pointer;
    float: left;
    list-style: none;
    text-align:center;
    width:200px;
}

/* Cursor to arrow over current panel, pointer for all others,
change .current class name using plugin option, currentPanel : 'current' */
.mb-slider .mb-panel.current {
    cursor: auto;
    padding: 0px;
    border:2px solid #146bab;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color:#ffffff;
    text-align:center;
    margin:0 20px;
    height:auto;
}

i had assumed the panel size was calculated by the script somehow as in the css there is no width set, that still i dont think would explain that once the arrow is clicked to go forward, then clicked to go back everything displays as it should....

i think i read somewhere there was a parameter in the options too set the panel dimensions, but it said this was now depreceated.

I tried changing all the image widths to 150 but it the issue is still there...

@Mottie
Copy link
Contributor

Mottie commented Oct 13, 2012

Line 139 of this page has the width definition, it's just before the css file but probably overriding the changes you made because of css specificity:

#slider li {
    width: 192px;
}

@DizzyBHigh
Copy link
Author

Hi Mottie, sorry for being a pain am still not there.
I tried removing this declaration, and still no change, ive been looking at it with firebug, and think the issue is here on the ul for the slider:

    Its adding padding-left of 122px, which is pushing everything to the right, how do i get rid of this?
    its not defined in the css anywhere from what i can see...

    EDIT*
    ok i seem to have fixed the issue by commenting out line: 193 of jquery.movingboxes.js

    // add padding so scrollLeft = 0 centers the left-most panel (needed because scrollLeft cannot be < 0)
    //'padding-left' : (base.width - base.curWidth) / 2

@Mottie
Copy link
Contributor

Mottie commented Oct 14, 2012

Oh that's what you meant! LOL... that's the line that makes the first panel center itself in the window because there isn't a panel on the left. It doesn't seem that is what you were describing initially. So this issue has been resolved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants