Solved

JQuery slider width

Posted on 2013-11-08
9
460 Views
Last Modified: 2013-11-08
Hi guys,

I am trying to use the following slider : basic-slider.com

My website is test.urban-indoors.co.uk

Im trying to get the slider to be 990px wide, as you can see on the left there is always a small gap and you can see a small part of the previous image, any ideas? I should mention that both the BeModern images are 990px wide

Many Thanks,
Dean.
0
Comment
Question by:deanlee17
  • 5
  • 4
9 Comments
 
LVL 1

Expert Comment

by:mkgtvm
ID: 39632841
It seems that the left value you are assigning for the picture (I believe you are doing it through javascript as I cant see it that in the CSS file) is 10px less than where it has to be the correct left value. Please correct the logic in calculating the left value and see.
0
 

Author Comment

by:deanlee17
ID: 39632849
Ok im kind of with you here. But im not sure exactly what the that value is called or set to in the javascript file. I'm confident its not a css issue
0
 

Author Comment

by:deanlee17
ID: 39632857
The only size change I made was in the attached bit of code, as you can see, ive changed the size quite a lot from the original (width:620) so I cannot see why its 10px short, ive tried setting it to 1000px wide, same issue.

jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,      <-- changed to 990
        'responsive' : true
    });
});

Open in new window

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Accepted Solution

by:
mkgtvm earned 500 total points
ID: 39632870
<ul class="bjqs" style="height: 235px; width: 6930px; left: -2970px; display: block;"><li class="bjqs-slide" style="height: 235px; width: 990px; display: list-item; float: left; position: relative;" data-clone="first" data-slide="0">

See the value of left as 2970, it changes when you have the pictures moving in the div banner-slide. I assume some value is set there by some function which I can't seen in my debug window. If you set that value correctly by adjusting the px value, it will render correctly. Hope this will resolve the problem
0
 

Author Comment

by:deanlee17
ID: 39632885
Yes just working on that.

-2970 is 3 * 990 (obv with a minus added)
0
 

Author Comment

by:deanlee17
ID: 39632888
Oddly tho in the demo the width is 620 and images are 620, yet mine is 990 and images are 990 and suddenly there is a gap, odd.
0
 
LVL 1

Expert Comment

by:mkgtvm
ID: 39632895
Ok. Let me know if you need more help. Thanks
0
 

Author Comment

by:deanlee17
ID: 39632914
Should be ok, I can get it working on my desktop, just need to get it into the management system that my hosting company use.

Thanks for your help
0
 
LVL 1

Expert Comment

by:mkgtvm
ID: 39632920
Great, and if you are happy with my help accept my solution.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question