We Keep Coding

Width not being respected in bxSlider

I am trying to make a slideshow with the jQuery plugin bxSlider.
Ultimately what I am trying to achieve is this: http://i.imgur.com/yae1Gvy.jpg
Although I just found that image online. I'm not too worried about the scroll bar.
I just want 2 of the 3 images to go off the page. bxSlider has an option to set the width of the slides (slideWidth) and I want that width to be the width of the image: 680px.
The container of the 3 slides however will not fit all 3 slides at their normal width so it maxes each slide out at $(window).width() / 3 and then applies that as an inline style so i cant override it. If i change the value to a smaller one then it works fine and fits nicely into the container but i need it to go out of the viewport.
Essentially this is what I would like to achieve and im 90% there apart from the sizing issue: http://www.aucklanddj.co.nz/weddings
The website linked above is using the same jQuery plugin.
Heres my code:
HTML:
<ul class="slide-container">
<li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
<li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
<li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>
Javascript:
$(document).ready(function(){
$('.slide-container').bxSlider({
auto: true,
useCSS: false,
pager: false,
controls: false,
autoHover: true,
minSlides: 3,
maxSlides: 3,
slideWidth: 680,
slideMargin: 0,
preloadImages:"visible",
moveSlides: 1,
captions: true,
responsive: false
});
});
Am I missing something where there is an option for max width or something? I must have looked over the options page for a good few hours and not found anything...also googled it a lot but not quite sure if I'm asking the right questions.
Any help would be greatly appreciated.

OK so it turns out my problem was with the containing element.
Basically I had to add 2 containing divs. My HTML now looks like this:
<div class="slider-outer-container">
<div class="bx-slide-container">
<ul class="bx-slides">
<li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
<li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
<li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>
</div>
</div>
and my css for those containers:
.slider-outer-container{
overflow:hidden;
}
.bx-slide-container{
width:3120px;
margin-left:-1040px;
margin-right:-1040px;
}
If you need to center everything get rid of the width in the first container.
The Javascript is exactly the same as in the original question.
Clearly my div naming skills could do with some improvement but that solved the problem for me!
Hope this helps anyone else looking to do the same thing.

Image slider not loading properly

This is the html for my website. I would like to add this image slider:. I have one problem, for some reason all I get is 4 bullet point and a error img picture next to it. Could you look at my html and see what you could do to help.
-Thanks
http://jsfiddle.net/lasquish/hL7vLcd5/
<div class="container">
<ul class="slider">
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
<li><img src="/images/Day1.jpg" /></li>
</ul>
</div>
This is the Script:
<script src="js/jquery.bxslider.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>

Since you have wrapped slide content with .slider class you need to do following changes
$(document).ready(function(){
$('.slider').bxSlider();
});
Call bxslider.min.js after jQuery library
Also you have call 2 different version of jQuery library. this will make conflict.

You need to add below css to remove bullet
ul
{
list-style-type: none;
}
Need to use correct image path or you can use full image "http://fiddle.jshell.net/img/logo.png"...
As you have not shared all required file here ..so we unable to test at our end. Please share js library file which you have include here if problem no solve.

Constantly update a div's content to another div

I have a div (.bx-caption) in which the text changes based on the title attribute of a selected image in a slider.
I'm trying to copy the text from this div to another div, and always have them be matching.
I'm using:
$(document).ready(function(){
$('.screenTitle').html($(".bx-caption").html());
});
This code works to match the text when the site loads, but whenever I change images in the slider and .bx-caption switches to a new title, .screenTitle doesn't pick up on it and stays the same.
What can I do to ensure that .screenTitle always matches .bx-caption?
Thanks in advance to anyone who helps out.
Update: the HTML looks like this:
<ul class="bxslider">
<li><img src="images/1.png" title="Funky Roots" /></li>
<li><img src="images/2.png" title="Little Toots" /></li>
<li><img src="images/3.png" title="Epic Loots" /></li>
</ul>
</div>
<div class="outside">
<div class="screenTitle"></div>
<div id="slider-prev"></div> <div id="slider-next"></div>
</div>
Here is a JSFiddle trying to attempt the above:
jsfiddle.net/uwA3Q/2/

Document.ready fires only once when you load the page.
who ever changing the slider put your code over there
$('.screenTitle').html($(".bx-caption").html());
for example if you have a click handler that changes the slide
$('#mySlide').on('click', function(){
//do the changing of the slide
//also update the title here
$('.screenTitle').html($(".bx-caption").html());
})

If you are using bxslider add onSlideAfter callback to change screen title:
$('.bxslider').bxSlider({
// ......
onSlideAfter: function($slideElement) {
// get .bx-caption element of current slide
$('.screenTitle').html($slideElement.find('.bx-caption').html());
}
});
http://jsfiddle.net/DQadF/2/

JQuery Carousel - shifting UL not LIs

I am using the JQuery Carousel plugin from here: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm
I have set it up as such:
<script type="text/javascript">
$(function(){
$(".carousel").carousel();
});
</script>
<div id="carouselholder">
<div class="carousel">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
</div>
</div><!--CAROUSELHOLDER-->
But when I hit the Next button it seems to shift the whole ul not the li.
Does anyone know how to fix this? (or maybe theres a better plugin?)
Below: Screen shot from Element Inspector:

The documentation on this plugin seems a bit slim. It appears that some additional styling is needed to make it work, but none of the examples illustrate this point.
Your setup is correct and in fact it will move the entire UL grouping, only showing the currently selected li. Using your simple code above, all I did was add the following CSS to make it work:
li {
float: left;
}
Just add a little more styling to your container to constrain the view and you should be good to go.

I think that is how it is meant to work
if you put a width on the carousel-wrap, so it only shows one image, the ul shifts position to show the next one
The li tags dont move
If you want to try another plugin, i recommend this one
http://caroufredsel.dev7studios.com/index.php .

Thanks for the help all, but I found that a modified version the Cycle plugin works a lot better:
http://jquery.malsup.com/cycle/nowrap.html

How to make javascript load faster?

Right now, we have a slideshow of images that uses javascript. However, when the page is still loading, the images would be briefly shown in a normal listed style (with bullets) before the javascript gets read and executed. Problem is, we don't want visitors to see the "naked" image list, even just briefly (sometimes it would last 2-3 seconds). We want them to immediately see just one image (not a list) that morphs into another (what the js does).
This is the html code for the slideshow:
<div class="slideshow">
<ul>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
<li><img src="images/....jpg" /></li>
</ul>
</div>
This is the slideshow that we used:
http://www.littlewebthings.com/projects/blinds/
and this is the JS file:
http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js
I am thinking that this may be a cache problem as the demo slideshow above only showed the "naked" image list once. Once it is refreshed/re-visited, it no longer shows (or still shows but a lot faster than the first time that it's almost unnoticable). Ours, on the other hand, keeps on re-reading the javascript as if it's always the first time (if you know what I mean).

hide all list with css and only show the first one image. So user wont see all the list apart from first image.

Although this doesn't directly answer the question of getting it to load instantly, one option would be to start with your div hidden with <div class="slideshow" id="myId" style="visibility: hidden">, and then as soon as you know your JS has loaded, show it (e.g. using jQuery):
$( "#myId" ).css( "visibility", "visible" );

Try edit the ul style this way:
ul{
list-style:none;
}
ul li{
position:absolute;
}
The list wrapper must have a fixed height ;)
Hope it helps