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
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 want to effect any images of slider randomly, but none of two consecutive images get the same effects at the same time. How can I do that?
$(window).load(function() {
$('#slider').nivoSlider();
});
$('#slider').nivoSlider({
effect: 'random',
slices: 4,
boxCols: 8,
boxRows: 4,
startSlide: 0,
manualAdvance: false,
randomStart: false,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.css" />
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="http://wowslider.com/sliders/demo-81/data1/images/redkite50498.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="http://ec.europa.eu/research/headlines/news/images/11_12_17_small.jpg" data-thumb="images/walle.jpg" alt="" />
<img src="https://secure.i.telegraph.co.uk/multimedia/archive/03597/POTD_chick_3597497k.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
<div id="wrapper">
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
From the documentation, the following animations are available for use:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
You are able to set the animation for each transition by using the data-transition, as shown here. With all of this in mind, you could override the beforeChange: function(){} function to set the new value for the data-transition property, excluding the animation names listed above which are referenced by the slide that is currently being shown.
I hope I can make this as clear as possible. I have a portfolio section on my one page scroll portfolio page, I want to have two links on each portfolio item div, which show when hovered over... one link which will trigger an image popup will show an image of details of the individual project and one which will link to the url of the finished work I am showcasing. For MagnificPopup it seems that I can only have one trigger or the other. Thank you for the help!
Javascript
// Initialize MagnificPopup Plugin
$('.filtr-container').magnificPopup({
type:'inline',
delegate: 'a',
gallery:{enabled:true},
zoom:{
enabled:true,
duration: 300,
easing: 'ease-in-out'
}
});
HTML
<!-- =============================
5. Start Portfolio
=============================== -->
<div class="portfolio section" id="4">
<div class="container-fluid">
<div class="row portfolio-holder">
<h1 class="wow fadeInUp" data-wow-duration="1.5s">PORTFOLIO</h1>
<div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
<div class="row filtr-container wow fadeInUp" data-wow-duration="1.5s">
<!-- ===== Single Portfolio Item Start ===== -->
<div class="col-sm-4 col-xs-6 filtr-item" data-category="1">
<div class="item-holder">
<!-- ===== First Link I want ===== -->
<a href="https://www.testingtest.com/" target="blank" title="Project Title 04">
<!-- ===== Second Link I want ===== -->
<a href="image/Portfolio/item3.jpg" title="Project Title 03">
<img src="image/Portfolio/item1.jpg" alt="item1">
<div class="item-caption">
<h2>Project <br> Title</h2>
<p>Graphic Design</p>
<p>Tools Used: HTML, CSS, JSS</p>
<div class="item-created">Jan 2017 </div>
</div>
<!-- item-caption -->
</a>
</div> <!-- item-holder -->
</div> <!-- filtr-item -->
<!-- ===== Single Portfolio Item End ===== -->
</div> <!-- filtr-container -->
</div> <!-- col-sm-10 -->
</div> <!-- row portfolio-holder -->
</div> <!-- container-fluid -->
</div> <!-- portfolio -->
So in reading over my question, I didn't clarify very well. Those of you who are curious. I just needed to create another initialization to have my logos pop up to an image modal and my websites go to a seperate url.
// Initialize MagnificPopup Plugin
$('.filtr-container').magnificPopup({
type:'div',
delegate: 'button',
gallery:{enabled:true},
zoom:{
enabled:true,
duration: 300,
easing: 'ease-in-out'
}
});
$('.image-item').magnificPopup({
type:'image',
delegate: 'a',
gallery:{enabled:true},
zoom:{
enabled:true,
duration: 300,
easing: 'ease-in-out'
}
});
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>
Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Those are in <head>. Here is the body:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>
<!--/slide -->
</div>
and here is the jquery:
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
interval: 500
// time between transitions
});
});
Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!
Try this
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
intervalSec: 500
// time between transitions
});
});
I have just changed name of value interval to intervalSec
as per the documentation other things should be okay
Also in the provided link of website you are using older version of jQuery v1.8.3
If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)
Update: In the given website Link there are two JQuery UI of different versions used
jQuery-UI 1.9.2
jQuery-UI 1.9.1
Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..
today I was trying to solve exactly the same problem.
Even though this answer is probably not required anymore, I will add it for further coders that will encounter the same problem.
The root cause is in bgincrement value. If there is no background that it can "move" it will stop responding without any error. And its total mess.
Setting bgincrement to zero made the slider work again:
$(document).ready(function () {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 0
});
});
I had the same problem... please deactivate all other jquery plugins, let only the slider at place. Do not forget to delete the initiation codes in your custom js file or in your html file as well ! Normally your slider works online after all.
Then you can re-add your plugins step by step and you will recognize with which plugin your slider has incompatibility. I had jQuery Timelinr 0.9.54 plugin which blocked my slider.