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.
Related
I am working a menu bar on a webpage. the menubar is based on an image library called Jcoverflip(<=You will find a demo here). The Image Slider works perfectly. That is until I start trying loading in content from different HTML's using AJAX technique.
When I flip a logo displayed in the top of the above image. Then it indeed does load the content from the other HTML's AJAX style. However the Jcoverflip slider does not work anymore.
Main.html
<div id="mycontainer">
<div id=w rapper>
<ul id="flip">
<li>
<img href="home" src="Logo.png" />
</li>
<li>
<img href="product" src="Product.png" />
</li>
</ul>
</div>
</div>
<div id="content"></div>
product.html
<img id="contact1" src="Contact.png">
MainMenu.js
jQuery( document ).ready( function(){
$("#content").load("home.html");
$("ul#flip li img").click(function(){
var page = $(this).attr("href");
$("#content").load(page + ".html");
return false;
});
});
when you click the product logo in the slider then the img of prouct.html will indeed load as intended but the slider does not slide to the product logo. the slider is now frozen.
here is a fiddle for more code. https://jsfiddle.net/qvgadgv4/
the fiddle doesn't work since you need Jcoverflip.
Is there anyone who can help me understand why using AJAX blocks my image slider from working? And come up with a solution to make it work with AJAX.
Well i still don't know why this Ajax method blocks my slider from working but I by chance found a solution.
You should ID your img instead of href.
<div id="mycontainer">
<div id= wrapper>
<ul id="flip">
<li><img id="home" src="Logo.png" /></li>
<li><img id="product" src="Product.png" /></li>
</ul>
</div>
Then load the content like this instead
$("#home, #product, #submit2").click(function(){
if(this.id == "home"){
$("#content").load("home.html");
}
if(this.id == "product"){
$("#content").load("product.html");
}
});
This will load the content into the div of the main html and the slider will work at the same time.
Having some trouble here styling my bxslider image slider. It also does not appear that it's taking whatever styles I've tried to give it, in the first place - but theres also the "prev" and "next" text links that i dont want either.
any chance someone can help trouble shoot where I need to make changes to style this to look more like this! --> http://danielmdesigns.com/windermere/images/sliderexample.png
Let me know if you need something else, but to see this live, please visit http://www.danielmdesigns.com/windermere/index.html and my HTML CSS and JS are below as well;
HTML
<ul class="bxslider">
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
<li><img src="images/imagescroll_1.png" /></li>
</ul>
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
background-size:cover;
position:relative;
top:95px;
}
and my JS above the end body tag;
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
i really just need this to be full width with only the pager dots showing, positioned on top of my slider... any and all help is appreciated.
Make sure to declare your custom CSS after you import the default .bxslider css file. That way you can override the defaults.
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/
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
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