I'm creating a slider using the Owl Carousel. I'd like to display something like "1 of number of slides" and increment the number on each slide. I've tried a couple of methods using jQuery but they haven't worked.
HTML:
<div class='owl-carousel owl-theme'>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
</div>
jQuery:
$('.owl-carousel').owlCarousel({
loop:true,
margin:20,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
},
});
var numberOfSlides = $('.item').length;
for (var i = 0; i < numberOfSlides; i++) {
$('.article-card-number').html(i + ' of ' numberOfSlides);
}
Any help would be greatly appreciated, thanks.
You have two options:
With events:
$('.owl-carousel').owlCarousel({
// your initialisation code
});
owl.on('translated.owl.carousel', function(event) {
$('.article-card-number').text(event.item.index + ' of ' event.item.count);
});
With info:
$('.owl-carousel').owlCarousel({
...
info: getInfo
});
function getInfo(i){
$('.article-card-number').text(i.currentPage + ' of ' i.allPages);
}
Note: None of the code segments above were tested but should work or require minimal changes.
Related
I've saved the cars into database and now wanted to show them in a carousel. I' m working with Owl Carousel and fetching the cars dynamically under the title Classic Cars. The issue is that I' m getting extra large space from nowhere between the Carousel and bullets.
I don't know how can I fix that.
Demo: https://thecarchain.com/marketplace
Blade
<section class="recommended-slider-wrapper">
<div class="row">
<div class="owl-carousel owl-theme recommended-box-slider">
#foreach($classic as $row)
<div class="item">
<div class="recommended-box">
<div class="img-slider">
<span class="for-sale">
<p class="fore-sale-text">{{ __('For Sale')}}</p>
</span>
<div>
<div class="owl-carousel owl-theme inner-img-slider">
#if (count($row->images)>0)
#foreach($row->images as $images)
<div class="item">
<img src="{{ asset('mypath/ImagesP'.$row->product.'/'.'u_'. $row->user_id.'/'.'qr_'.$row->id.'/' . $images->name) }}" alt="recomanded-1" class="card-img-top">
</div>
#endforeach
#endif
</div>
</div>
</div>
<div class="recommended-box-text">
<div class="card-body-content">
<a href="{{route('myRoute',[$row->id,$row->product])}}">
<h4>{{$row->make}} {{$row->model}} {{$row->trim}} {{ __("$row->car_body")}}</h4>
</a>
<span>{{$row->manufact_year}} - #if($row->price && $row->currency){{$row->price}} {{$row->currency}}#else {{ __('Price on Request')}}#endif
</span>
<div>
<i class="fas fa-map-marker-alt mr-1"></i>
{{$row->address}}
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JavasScript
//Main Carousel Code
$(function() {
'use strict';
$('.recommended-box-slider').owlCarousel({
loop:true,
dots: true,
items:3,
nav:false,
dotsEach:true,
margin:10,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
//Show the Car Images inside the Ad
$('.recommended-box-slider .inner-img-slider').owlCarousel({
loop:true,
loop:true,
dots: true,
nav:false,
dotsEach:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
I think it's because your html. You opened a section tag and 2 other div tags before foreach loop, but after loop you closed many div tags.
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/
Here is my owl carousel HTML and javascript.
HTML:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" data-hash="slide1">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide2">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide3">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
</div>
JavaScript:
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash'
});
I have a navigation block below it that uses Url Hash Navigation.
<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
</div>
When a slide is clicked to or comes on screen, I need the corresponding link to change it's styles to show it is the one currently active.
I haven't found any native way to do this in Owl Carousel and wasn't sure how to accomplish this with Javascript
After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
Owl Carousel supports this natively, see here in the docs:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
How can I add 'active' class to the buttons?
Currently buttons have a button.secondary:hover & button.secondary:focus
to create a button background color change.
This is fine, except whenever clicking anywhere in the slider the focus is changed and so the background color is removed from the button.
I need the buttons to have a dedicated active state, so that clicking within the slider is possible.
Thanks
You can solve this with javascript or jQuery, here's a jQuery example:
$(document).ready(function() {
$('.button').on('click', function(){
$('.button').removeClass('active');
$(this).addClass('active');
});
});
This removes the 'active' class for all buttons when you click any element with the class 'button' and adds it to the one you're clicking.
After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
in latest owlCarousel v 2.0.0 , I want to slide all items visible in viewport, clicking on prev/next buttons like the dots nav do . However I want the same functionality in prev/next button while loop value is true. I have created a pen : Codepen Please look into. Anyhelp using available option will be great help.
HTML:
<div class="owl-carousel">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})
slideBy option in owl carosel is handy. It solves the issues.
Included it as follows.
Updated JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1,
slideBy: 1
},
600: {
items: 2,
slideBy: 2
},
1000: {
items: 5,
slideBy: 5
}
}
})