How to animate each content layer with selected css animation with owlCarousel slide?
Here what I did, but I can't make it work properly.
HTML
<div class="owl-carousel owl-theme">
<div class="slide-item-1">
<div class="layer layer1">
<div data-animate="animated fadeInLeft">
<h1>I'm layer 1</h1>
</div>
</div>
<div class="layer layer2">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 2</h2>
</div>
</div>
</div>
<div class="slide-item-2">
<div class="layer layer1">
<div data-animate="animated fadeInLeft">
<h1>I'm layer 1</h1>
</div>
</div>
<div class="layer layer2">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 2</h2>
</div>
</div>
<div class="layer layer3">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 3</h2>
</div>
</div>
</div>
</div>
JavaScript
jQuery(document).ready(function($) {
$('.owl-carousel').owlCarousel({
items:1,
dots: true,
nav: false,
animateOut: 'fadeOutLeft',
animateIn: 'fadeInRight',
autoplay:true,
onTranslated: animateSlide,
onTranslate: removeAnimation
});
function removeAnimation() {
var item = $(".owl-item .layer");
item.removeClass(item.children().data('animate'));
}
function animateSlide() {
var item = $(".owl-item.active .layer");
item.addClass(item.children().data('animate'));
}
});
Now I have this issues,
It shows content first and then animate, I mean contents don't come with animated, it comes first then animate.
First slide 'layer' DIV content don't animate content in first view but good after come back from other slides..
Last slide 'layer' DIV content animation works on first time view but next time don't work. What I can see is it add double animation or don't remove animation class after slide to another.
Middle slides are working fine without any problem.
There are different events of the owl-carousel where you can bind animate.css animations to.
In the example I used the change.owl.carousel event:
change.owl.carousel
Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.
The function itself adds the animation class (addClass()) and removes it again after the animation end is triggered (one(...) followed by removeClass()).
var owl = $('.custom1').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450,
loop: true,
dots: true,
autoplay: true,
});
owl.on('change.owl.carousel', function (event) {
var el = event.target;
$('h4', el).addClass('slideInRight animated')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('h4', el).removeClass('slideInRight animated');
});
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
<div class="custom1 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>
</section>
Related
I've seen a lot of questions about placing an Owl carousel control inside a Bootstrap tab pane. For instance, Owl Carousel not working inside Bootstrap Tabs and Owl Carousel broken inside tab panel.
I'd like to implement the opposite: to place Bootstrap tab panes inside a slide (div) within Owl carousel. Unfortunately, it doesn't work: clicking on a button group doesn't switch the tabs. If I get the slide outside of the carousel, it starts working. I've found what the problem is. Owl Carousel creates copies of the slide (owl-item cloned) to make the slides look looped. As the result, there are several button groups with the same id and name. They are conflicting, so switching tabs doesn't work.
Is there a way to workaround the issue somehow? Or Owl carousel supports simple, cloneable, types of slides only?
If I set loop to false, it helps, but I'd like to keep the slides looped.
$('.owl-carousel').owlCarousel({
items: 1,
loop: false, // <--------
nav: true,
});
Try this
<!DOCTYPE html>
<html>
<head>
<title>OwlCarousel Slider</title>
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> Your Content Tab 1</div>
<div> Your Content Tab 1 </div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1 </div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1</div>
<div> Your Content Tab 1</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2</div>
<div> Your Content Tab 2Tab 2Tab 2</div>
<div> Your Content Tab 2Tab 2</div>
<div> Your Content Tab 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
speed: 800,
margin:15,
autoplay:true,
nav:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:3
}
}
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
$(".owl-carousel").trigger('refresh.owl.carousel');
});
});
</script>
</body>
</html>
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.
I am using slick slider (http://kenwheeler.github.io/slick/) to show images of various sizes (both portrait and landscape pictures). The image is shown as a background-image property of the div
However, the slider has a fixed width/height out of the box.
My requirement is to have all the slick divs with a fixed height - but a variable width based on the portrait or landscape picture. In the below code, images 2,3 are portrait mode and 1,4 are landscape mode.
<div class="wrapper gallery-wrapper">
<div class="container-fluid gallery-container">
<div class="row">
<div class="col-md-12 slideshow">
<div class="agent-detail-slideshow" id="agent-detail-slideshow">
<div class="item slick-slide-width" data-image="assets/img/1.png" style="background-image:url('assets/img/1.png')"></div>
<div class="item slick-slide-width" data-image="assets/img/2.png" style="background-image:url('assets/img/2.png')"></div>
<div class="item slick-slide-width" data-image="assets/img/3.png" style="background-image:url('assets/img/3.png')"></div>
<div class="item slick-slide-width" data-image="assets/img/4.png" style="background-image:url('assets/img/4.png')"></div>
</div>
<ul>
<li class="next-carat white shadow"></li>
<li class="prev-carat white shadow"></li>
</ul>
</div>
</div>
</div>
</div>
I set the variable width property of the slider to true and have added a custom slick-slide-width class to each div.
What CSS needs to go into the slick-slide-width ?
Is it possible to use just CSS to adjust the div width or do I need any javascript to control the div width. Also, the height needs to be fixed and as decided by the slider (responsively). So, it would be landscape,portrait,portrait,landscape divs in the above code.
To size your slides based on image ratio you need to use proper <img /> tags in your slides (mind the markup in the example below). And use...
$('...').slick({
// ...
variableWidth: true
centerMode: true, // optional
// ...
});
If your images do not already have the same height, you probably want to couple this with...
.slick-slide img { max-height: /*...*/ }
$(document).ready(function() {
$('#agent-detail-slideshow').slick({
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
})
.slick-slide {
opacity: .1;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
outline: none;
}
.slick-current {
opacity: 1;
}
.slideshow {
overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="wrapper gallery-wrapper">
<div class="container gallery-container">
<div class="row">
<div class="col-md-12 slideshow">
<div class="agent-detail-slideshow" id="agent-detail-slideshow">
<div class="item"><img src="https://unsplash.it/600/300" /></div>
<div class="item"><img src="https://unsplash.it/800/300" /></div>
<div class="item"><img src="https://unsplash.it/400/300" /></div>
<div class="item"><img src="https://unsplash.it/200/300" /></div>
<div class="item"><img src="https://unsplash.it/500/300" /></div>
</div>
</div>
</div>
</div>
</div>
I'm hoping that someone would be kind enough to help me.
I have patched together a script to create a set of thumbnails that when hovered over display a link that will show further information in a slide up div.
I need multiple instances of this which I have managed to create but whenever I would like to add a new project (which is what these thumbnails will be) I have to add to the javascript every time I add an instance. I need this to work with a CMS so adding to the javascript is out of the question.
My understanding of javascript is not good enough to work out how to reduce the JS and not have to add $("#projectX").slideDown(500); even time I add a new project. The code I have so far is below. I basically don't want to have to write a piece of javascript every time I input another thumbnail and slide up div pairing.
HTML:
<div class="row">
<div class="col-xs-12">
<div class="hidden-work">
<div id="project1" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider2">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 1</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div><!--callbacks_container-->
</div><!--eejits-->
<div id="project2" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider1">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 2</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div>
</div><!--project2 (reach)-->
<div id="project3" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider3">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 3</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div>
</div><!--project3-->
</div><!--work-->
</div>
</div><!--row-->
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no1">
<div class="content">
<h3>Thumb 1</h3>
<p>Lorem ipsum.</p>
<button class="project1 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no2">
<div class="content">
<h3>Thumb 2</h3>
<p>Lorem ipsum.</p>
<button class="project2 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no3">
<div class="content">
<h3>Thumb 3</h3>
<p>Lorem ipsum.</p>
<button class="project3 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
</div><!--row-->
JS:
$(function () {
$("#slider1").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
$(function () {
$("#slider2").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
$(function () {
$("#slider3").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
$(document).ready(function(){
$(".project2").click(function(){
$("#project2").slideDown(500);
$("#project1").slideUp(500);
$("#project3").slideUp(500);
});
$(".project1").click(function(){
$("#project1").slideDown(500);
$("#project2").slideUp(500);
$("#project3").slideUp(500);
});
$(".project3").click(function(){
$("#project3").slideDown(500);
$("#project1").slideUp(500);
$("#project2").slideUp(500);
});
$(".hide").click(function(){
$("#project1").slideUp(500);
$("#project2").slideUp(500);
$("#project3").slideUp(500);
});
});
I really hope that makes sense and any help with this would be brilliant.
Thanks
You need to look into the different selector type. http://api.jquery.com/category/selectors/ Anything prefaced with a # is referencing an element by id (which should be unique and thus only return 1 element) anything prefaced with a . refers to elements by class
EDIT:
Just realised you need to manipulate a separate element to the one that is clicked. OK so to make sure this works universally, you need to make sure the order is the same for the "buttons" and the "slides". We're going to find the index of the button clicked and then use that same logic to slide the appropriate divs.
You can give your buttons a class of "project-button" and your projects a class of "project"
So to make your code universally applicable with one listener you could give all your projects a class of project and then do something like this:
// Attach the same click listener to all elements which have class `project-button`
$('.project-button').on('click', function () {
// Get the index of this clicked button
var myIndex = $(this).index();
// Now get the corresponding `slide`
var mySlide = $('.project').get(myIndex);
// Get all `.project`'s then exclude `mySlide`and slide up
$('.project').not(mySlide).slideUp(500);
// Now slide down just `mySlide`
$(mySlide).slideDown(500);
});
Demo: http://jsfiddle.net/robschmuecker/jPyk6/
You can try below code.
$(".hidden").click(function(){;
$(this).slideDown(500);
($(this).siblings()).each(function( index ) {
$( this ).slideUp(500);
});
});
I saw that you use class="link" for every buttons, you can use class instead of id. Then add id to the button for selecting the right div, like this:
HTML
<button id="project1" class="project1 link">VIEW MORE</button>
jQuery
$('.link').click(function(){
//slideUp all div with class hidden
$('div.hidden').slideUp(500);
//slideDown div with id equals the clicked button
$('div#'+$(this).attr('id')).slideDown(500);
});
I think the same goes for your slider, use the class instead of the id, like this:
$(function () {
$(".rslides").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
Note: I don't see any element with class events, so I assume its a global element..
I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it.
I have the opacity of all the captions set to 0 and then add a class named "animate-me" (with jQuery) to the captions. The first one fades in and then all the others are constantly displayed.
Here's what I have so far on jsbin... http://jsbin.com/OGehUKEh/3/edit
You need to use Owl Carousel callbacks. I found the callbacks you need.
$("#owl-example").owlCarousel({
beforeMove: function(){
// BEFORE going to the next slide (hide captions)
},
afterMove: function(){
// AFTER going to next slide (show captions)
}
})
I've successfully done this using jCapSlide (http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/).
Here's the HTML:
<div class="owl-carousel">
<div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
<img alt="text" src="imagelocation"><!-- This is my image -->
<div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
<div class="ic_caption">
<h3>TITLE To display</h3>
<p class="ic_text">Caption</p>
</div>
</div>
<div class="item" id="id_b">
<img alt="text" src="another image">
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>Title 2</h3>
<p class="ic_text">More Text</p>
</div>
</div>
<!-- More pictures in the same fashion as above -->
</div>
Include the CSS in the HEAD
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">
Include the JScript just before the
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>
<script src="/js/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});
$("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
$("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
</script>
jCapSlide is very flexible, and you can mess with the CSS and JS to get the exact colours/animation you want.
Debbie