Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery slider width

Posted on 2013-11-08
9
Medium Priority
?
469 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Accepted Solution

by:
mkgtvm earned 2000 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

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

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

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.
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 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…
Suggested Courses

705 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