Solved

JQuery slider width

Posted on 2013-11-08
9
448 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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)

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now