i'm trying to make captions in owl carousel. i'm using animate.css.
I've added animation to captions in carousel but it's not working for all. Only first slides caption have animation. Here is my code;
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div>
</div>
</div><!-- End Carousel -->
<style>
.caption {
position: absolute;
font-size: 1.5em;
top: 0;
left: 15px;
border:1px solid;
color:orange;
text-shadow: 2px 2px 1px #000;
padding-top: 60vh;
}
</style>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:3500,
nav:true,
})
});
</script>
I'm waiting your help about that. I'm stuck
The animation is only applied once when the class is applied to a div. Therefore all of your slides animate once at the start only, but you can only see the first div, and so nothing else happens.
If you watch for slide changes in the carousel and then remove the 'animate bounce' classes from all divs before instantly re-applying it to the one on screen then you can see each one animate.
Try this jquery:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3500,
nav: true,
margin: 10,
});
owl.on('changed.owl.carousel', function(event) {
var item = event.item.index - 2; // Position of the current item
$('h1').removeClass('animated bounce');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
});
});
and then in your html only use the 'animate bounce' classes for the first slide (remove it from the others):
<div id='monitor'>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Fourth Caption</h1></div>
</div>
</div>
<!-- End Carousel -->
This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ You had to remove class animated after change but this function is missing in owl.carousel 2: afterMove and beforeMove
Related
I am using a Plugin for Owl Carousel:
https://github.com/gijsroge/OwlCarousel2-Thumbs
It inserts Images as Navigation-Thumbs.
I tried to figure out the height of the whole .owl-thumbs Element. Which is possible in the Console. But the same Code in my scripts.js returns "null" for the height.
Here is my Code:
jQuery( document ).ready(function($) {
console.log($('.owl-thumbs').outerHeight());
});
.. I also tried to use another selector, like $('.owl-carousel.single owl-loaded .owl-thumbs') etc..
Here is the Markup of the Carousel:
<div class="carousel single">
<div class="owl-carousel single owl-loaded owl-drag" data-slider-id="1">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-6985px, 0px,
0px); transition: all 0.25s ease 0s; width: 8255px;">
<div class="owl-item video-item" style="width: 635px;"><a href="/wp-
content/uploads/2016/02/thumbexample-4.jpg" data-thumb="<img
src="/wp-content/uploads/2016/02/thumbexample-4.jpg"/>"
class="single-slide" data-featherlight="image">
<img src="/wp-content/uploads/2016/02/thumbexample-4.jpg"></a>
</div>
</div>
<div class="owl-nav"><button type="button" role="presentation"
class="owl-prev"><span aria-label="Previous">‹</span></button><button
type="button" role="presentation" class="owl-next"><span aria- label="Next">›</span></button></div><div class="owl-dots"><button
role="button" class="owl-dot"><span></span></button>
</div>
<div class="owl-thumbs"><button class="owl-thumb-item"><img src="/wp- content/uploads/2016/02/thumbexample-4.jpg"></button>
</div>
</div>
</div>
</div>
Get the value after the plugin has initialized
var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('initialized.owl.carousel', function(event) {
$('.owl-thumbs').outerHeight();
})
I just found a solution:
if($.fn.owlCarousel.Constructor.Plugins.Thumbs) {
thumsHeight = $('.owl-thumbs').outerHeight();
}
...works :)
is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight()
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
teamCarousel();
});
You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/
For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.
The mobile version uses the same images and order as our dekstop version, because
both versions use the same database query.
/*
* Carrousel
*/
$q = "
SELECT
c.id,
CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
FROM
product_carrousel c
WHERE
c.product_id = '" . $product_id . "'
ORDER BY
c.order ASC
";
$r["carrousel"] = $this->db->select($q);
What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.
HTML/PHP Mobile version:
<div class="swiper-container product-slider">
<div class="swiper-wrapper">
<?php foreach ($product['carrousel'] as $x => $item):?>
<div class="swiper-slide">
<figure class="swiper-slide-img">
<img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
</figure>
</div>
<?php endforeach; ?>
</div>
HTML Output Mobile:
<div class="swiper-container product-slider done">
<div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
</div>
Partial solution:
In idangerous.swiper.min.js i found the setting: initialSlide.
Changing that to -1 makes the slider start with the last slide in mobile.
I've added to ui.js the following:
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
},
Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.
On load:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
While dragging/swiping:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
</div>
After swipe:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
Solution
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
$(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
I have owl carousel slider and am calling API for page content which am calling on image on click,
and also calling onsen template page using ng-click on image but it works only in first image,
in 2nd ,3rd ...... image click not call that onsen-ui template page.
Here is java script function
function product_list(slug)
{
alert(slug);
// $('.please_wait').show();
$.ajax({
type: 'GET',
url: 'http://test.com/api/get_page/',
data: {slug: slug},
dataType: 'jsonp',
success: function (response)
{
alert(response);
var obj = JSON.stringify(response);
obj1 = JSON.parse(obj);
var title=obj1.page.title;
alert(title);
var content = obj1.page.content;
alert(content);
$('#' + slug).html(content);
// $('.please_wait').hide();
},
error: function () {
},
});
}
Here is my css code
.please_wait {
background: #fff url("img/loader.gif") no-repeat scroll center center;
color: #ffffff;
display: none;
height: 100%;
opacity: 0.7;
position: fixed;
text-align: center;
vertical-align: middle;
width: 100%;
z-index: 9999;
}
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: 300px;
}
#media (max-width:480px){
.content img,.content iframe {
height: 200px;
width: 100% !important;
}
}
#media (max-width:360px){
.content img,.content iframe {
height: 180px;
width: 100%;
}
}
Here is html code
<div id="content" class="content">
<div id="owl-demo">
<ul><li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth');" ng-click="app.navi.pushPage('wealth.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health');" ng-click="menu.setMainPage('health.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>
<ul><li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>
</div>
</div>
<script>
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items: 1,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3]
});
function reload() {
location.reload();
}
</script>
I want to call page of onsen on image click and pass content of page from api using javascript.
Thanks.
<ons-navigator var="Navigator">
<div id="content" class="content">
<div id="owl-demo">
<li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');"></li>
<li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth'); Navigator.pushPage('wealth.html');" ></li>
<li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');"></li>
<li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');">
<li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');" ></li>
<li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>
<li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>
</div>
</div>
<script>
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items: 1,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3]
});
function reload() {
location.reload();
}
</script>
<ons-template id="education.html">
<ons-page style="background-color: #FFFFCC;">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.openMenu();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Education</div>
</ons-toolbar>
<div id="education" class="content">
<div class="footer-text"><label>Copyright # 2016</label></div>
</div>
</ons-page>
</ons-template>
use ons navigator.
I need code in jQuery to show 6 div's per slide. I have slider, and I want show only 6 div's/elements and after 6 div the code will be create next slide(div with class slide)
<div class="slide">
<div>
6elements
</div>
</div>
next slide => <div> 6 elements </div>
Slick slider
Here is a working Plunker that shows how to implement the jQuery/Slick plugin with responsive break points.
The documentation for Slick provides several options for your slides.
Javascript
$('#slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
responsive: [{
breakpoint: 600,
settings: {
slidesToShow: 1,
rows: 2,
slidesPerRow: 2,
}
}]
});
HTML
<div id="slick">
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/alhBkw5.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Qdqaawt.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Bplxu8k.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/fixuYTj.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9hpqKt0.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9VCx5.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/scV4kAY.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/PfDrZOZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/lxMUSqZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/wD1r3Yk.png"></div>
</div>
</div>
CSS
.img-container {
overflow: hidden;
max-height: 100px;
margin: 3px 5px;
}
.img-container img {
width: 100%;
}
#slick {
/* optional */
max-width: 700px;
margin: 50px auto;
}
Wordpress Function
Here is a Wordpress demo of the following php function.
PHP
Add this function to your functions.php file:
function six_images_slider() {
$args = array('numberposts' => 18);
$recent_posts = wp_get_recent_posts( $args );
$output = '<div id="slick">';
foreach ($recent_posts as $post) {
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
$output .= '<div class="slide"><div class="img-container"><img src="'.$featured_image_src.'"></div></div>';
}
$output .= '</div>';
echo $output;
}
Add this to your home.php template file:
<?php six_images_slider(); ?>
Also, it should work in any Wordpress template file.
Function Explanation
This function gets the most recent 18 posts by calling wp_get_recent_posts.
Then it loops through the posts and gets the featured image by calling get_post_thumbnail_id and passing the result to wp_get_attachment_url to get the src.