I´m using dots to navigate the owl carousel 2.
I like to change the navigation from click to hover.
So when I hover the second dot, the carousel jumps to the second slide.
Couldn't find something like this in the documentation.
Are there any easy solutions for this?
The easiest solution would be something like this:
$('.own-carousel .dot').hover(function() {
$(this).click();
}, function() {});
This simply triggers the click events on hover. I am not sure about the classes own-carousel and dot, better check those.
Related
I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});
I am using swiper as a slider for my mobile view. Basically, the divs that I would like to apply swiper-slide class are not siblings of each other.
Here's the sample fiddle to demonstrate my use-case: https://jsfiddle.net/2prcosmk/
Whenever I try to use swiper that way, the first slide is shown correctly but I can not perform actual sliding from first to any other slides (as its obvious in the demo fiddle when you try to move the slider). I wonder if its possible. I can not really re-organize my html as I have multiple cards in multiple columns so each of these card would become one slide and so would the entire header.
Can you provide some suggestion here or any pointer on the code sample I've put? Thanks!
Update: I tried nesting the swiper-* classes in https://jsfiddle.net/2prcosmk/2/ and it does create swipers but the nested swiper content are just not displayed. If I make inner swiper direction: 'horizontal', it creates vertical swiper inside horizontal swiper as expected but horizontal inside horizontal does not seem to work.
The nearest I could go was to use nested: true and direction: 'horizontal' in the inner swiper. Here's the fiddle: https://jsfiddle.net/2prcosmk/3/ . One problem probably would be the pagination setup so if anyone can answer how we can combine together the two paginations, that would be awesome but for now, this is good enough.
I'm trying to make a custom slider for a few testimonials. The picture below illustrate how it should work. The first testimonial is highlighted and when the user clicks on the next testimonial the yellow background should slide to it, the font color of the name and company should change and also the actual testimonial text should slide.
I managed to make a functional version, which you can see in this fiddle or live on this website. Any improvements and explanations will be highly appreciated (I'm still very new to jQuery).
Here is the jQuery code I used:
$("div.container-slider").click(
function () {
$("div.active-slide").toggleClass("animate", 1000, function () {
$("div.mike").toggleClass("current-font", function () {
$("span").toggleClass("company-current");
}),
$("div.neil").toggleClass("inactive-slide", function () {
$("span").toggleClass("company");
});
}),
$("div.testimonial-text").slideToggle("slow", function () {
$("div.testimonial-text-2").toggleClass("display-none");
});
});
Problems:
How can I make the font color and weight change more subtle?
How can I target specific span codes, because right now the script changes the span color everywhere on the website?
How can I make the testimonial-text slide more smoothly (similar to the yellow background)?
It looks like you're already using CSS transitions. Have you tried fiddling with them?
Use this to limit scope to the current element, as in $(this).find('span')...., or use index (eq()) to target by slide, or give the relevant spans a class to target.
I'm not sure why you're toggling your display-none class, but that's
probably causing the abruptness. Try removing that.
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
I am trying to animate a menu and have things sliding to the right on mouseover. Is there an easy way of undoing everything mouseover did when mouseout?
I have all the menu items (of my vertical menu) slide to right and have an empty news div slide in place of these menu items, which then gets filled with content, once it is in place... i.e. multiple instances of animate().
I think you are looking for something like .stop function: http://api.jquery.com/stop/
And probably you want to do something like this:
$(el).hover(function () {
$(this).stop().animate(...);
}, function () {
$(this).stop().animate(...);
});
Example: http://jsfiddle.net/VjKLe/