Solved

JQuery slider width

Posted on 2013-11-08
9
465 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
Suggested Courses

630 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