I have this html code:
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide">
<img src="images/image1.jpg">
</div>
<div class="slide">
<img src="images/image2.jpg">
</div>
<div class="slide">
<img src="images/image3.jpg">
</div>
</div>
</div>
After every div with class slide there's the img as you can see above.
Using jquery, how can I get it to auto slide between images?
You can use setInterval() to cycle through the slides.
Set it so after x time move to the next slide
The snippet below isn't functioning completely properly, but it gives you a general idea
$(document).ready(function(){
window.setInterval(nextSlide, 1000);
});
function nextSlide() {
var $cur = $('.slide.active');
var $next = $cur.next();
if(!$next) $next = $('.slide-group').children()[0];
console.log($next);
$cur.removeClass('active');
$next.addClass('active');
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide active">
SLIDE 1
</div>
<div class="slide">
SLIDE 2
</div>
<div class="slide">
SLIDE 3
</div>
</div>
</div>
Jon Raasch's simple jquery slideshow is the absolute classic, in my opinion. I've seen it used on many sites.
http://jonraasch.com/blog/a-simple-jquery-slideshow
His example uses a fade, but you can change it to a slide or even Ken Burns it easily enough.
http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/
is just one example of tutorials for image scrollers using jquery.
Just google "jquery image scroller" then if you have further issues come back and see us :)
Related
I'm very new coding with JQuery.
What I want to do is prevent showing next slide (that becomes first slide of the slideshow) when last slide is reached (as in this carousel: link to carousel). The only thing I did is to prevent showing previous/next button (".owl-prev/.owl-next" in my JQuery) for first/last slide adding a css class. I tried to hide next slide when last slide reached but not working. Anyone could help me?
Following JQuery actually working to hide buttons, css class to hide buttons and html carousel:
$(document).ready(function() {
$(".owl-carousel").on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
if (!event.namespace) return;
var carousel = event.relatedTarget,
element = event.target,
current = carousel.current();
$('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
$('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());
});
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
display: none;
visibility: hidden;
}
<div class="owl-carousel">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="dt-owl-item cloned">
<div class="dt-owl-item cloned">
<div class="dt-owl-item">
<div class="dt-owl-item">
<div class="dt-owl-item active">
<div class="dt-owl-item cloned">
<div class="dt-owl-item cloned">
And this is JQuery to prevent showing slide not working:
if (current === carousel.maximum()){
$(".dt-owl-item").hide();
How about you do it like:
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
$('.owl-carousel').owlCarousel({
loop:false,
margin:10,
nav:false })
Notice the loop:false property and you won't have to subscribe to different events of carousel.
Have you tried setting the "loop" property off from your carousel?
Docs: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
Update:
I see, then you could try something like this to update its settings:
var $carousel = $('.owl-carousel');
var owl = $carousel.data();
owl["owl.carousel"].options.loop = false;
owl["owl.carousel"].refresh();
Dunno if it's the best way to fix it, but it worked for me.
First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.
You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});
First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});
I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.
How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo
I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle
You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.
I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here
I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.