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;
}
Related
I've got a couple of divs to scroll between. I need to set the one in active view (after a link was clicked) to 'active' and all the other div's should have that class removed.
Using toggle I can't get it to work.
$('.projecten').click(function () {
$('#due').toggleClass('selected'),
$paneTarget.stop().scrollTo('#due', 800, {
margin: true,
onAfter: function () {
$("body").animate({
backgroundColor: "#1f8311"
}, 800),projectenfade();
}
}); menuShow(),titleFadeOut();
});
the html
<div id="due" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="otto" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="etc" class="elements">
<h3 class="resizeme">...</h3>
</div>
...
<div id="menu">
<p>
<a class="welkom pointme">Welkom</a> <a class="blog pointme">Blog</a> <a class="media pointme">Media</a> <a class="projecten pointme">Projecten</a> <a class="contact pointme">Contact</a>
</p>
</div>
why not just use addClass and removeClass:
$(".selected").removeClass("selected");
$(this).addClass("selected");
to only remove selected from divs use this for the first line:
$("div.selected").removeClass("selected");
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
I'm using the excellent slider OWL Carousel 2. http://www.owlcarousel.owlgraphic.com/
My issue is the URLhashListener option only allows you to create a link to a specific slide but does not allow the user to copy the url link from the current slide to share. I would assume the correct behaviour of this option would be the URL updates as the user moves to the next slide so they can then copy that unique URL.
http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html
My OWL code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var owl = $(".owl-carousel");
owl.owlCarousel({
smartSpeed:1500,
items:1,
lazyLoad:true,
loop:true,
URLhashListener:true,
startPosition: 'URLhash',
nav: true,
});
});
//]]>
</script>
I'm using data-hash in my image tag to generate the hash id for each image which works fine (you can link to the specific slide). But when you click next and arrive at the next slide the URL will remain as #HASHID. The link no longer corresponds to the current slide.
<img id="zm" class="owl-lazy owlimg" data-hash="slideID" data-src="myimagelink.jpg">
Here's a live page with the url hash nav working:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/
With hash:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14
I'm sure these docs hold part of the answer but I'm not sure how to piece it all together. http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Update (Native solution)
It seems that once you add data-hash to your items, the plugin take care about all the functionality.
http://jsbin.com/javuwod/edit?html,js
Original Answer
You can easily "listen" to slide changed event using changed.owl.carousel, then you can change the hash according the slide's index.
var owl = $('.owl-carousel');
owl.owlCarousel({
margin:10,
nav:true,
URLhashListener: true,
startPosition: 'URLHash'
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
location.hash = 'slide' + event.property.value;
})
<link href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div id="demos">
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<h4>1</h4>
</div>
<div class="item" data-hash="slide1">
<h4>2</h4>
</div>
<div class="item" data-hash="slide2">
<h4>3</h4>
</div>
<div class="item" data-hash="slide3">
<h4>4</h4>
</div>
<div class="item" data-hash="slide4">
<h4>5</h4>
</div>
<div class="item" data-hash="slide5">
<h4>6</h4>
</div>
<div class="item" data-hash="slide6">
<h4>7</h4>
</div>
<div class="item" data-hash="slide7">
<h4>8</h4>
</div>
<div class="item" data-hash="slide8">
<h4>9</h4>
</div>
<div class="item" data-hash="slide9">
<h4>10</h4>
</div>
<div class="item" data-hash="slide10">
<h4>11</h4>
</div>
<div class="item" data-hash="slide11">
<h4>12</h4>
</div>
</div>
</div>
http://jsbin.com/javuwod/edit?html,js
I am using the jQuery Isotope and Swipe plugin for a Photo gallery. I want to reload all the items when i close the gallery Swipe but there is a problem. All the items aren't reload very well and when i try to select a new category of items, they just split far from the others. I try lot of things like isotope('reloadItems'), isotope('reLayout') but without success.
I don't know where the problem come.
This pages will show you what i mean : http://digitale-photographie.fr/portfolio.php
Also, code samples:
portfolio.php
<div id="sort">
Tous
Soirée
Mariage
Portrait
Grossesse
Publicité
Industrie
</div>
<div id="photogrid">
<?php
for ($j=0;$j<=$i-1;$j++)
{
$image_mini = '<img src="photos/portfolio/thumbnails/'.$tab_image_mini[$j].'" />';
echo '<div class="thumbnail '.$tab_class[$j].'" data-background="photo.image.large"><a class="thumb">'.$image_mini.'</a></div>';
}
?>
</div>
<div id="mainimage">
<div id='photos' class='swipe'>
<div class='swipe-wrap'>
<?php
for ($j=0;$j<=$i-1;$j++)
{
echo '<div class="img '.$tab_class[$j].'" data-image="photos/portfolio/zoom/'.$tab_image_zoom[$j].'" data-width="1024" data-height="702">
<div class="ui photoinfo hidden">
<!-- Photo Title & Description -->
<h2 class="phototitle">Runaway...</h2>
<!-- Metadata -->
<ul class="metadata"></ul>
</div>
</div>';
}
?>
</div>
</div>
<div class="ui button backbutton hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
<p>Retourner à la galerie</p>
</div>
<div class="ui photonav button prev hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
<div class="ui photonav button next hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
</div>
js code
$(document).ready(function() {
$(window).load(function(){
var $container = $('#photogrid');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#sort a').click(function(){
var selector = $(this).attr('data-filter');
/*$('.img').isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});*/
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
// hide photo view with back button
$('.backbutton').click(function() {
// Hide photo layer and current photo
mainimageElement.removeClass('visible black');
$('.ui').addClass('hidden');
if (isTouchDevice()) {
headerElement.removeClass('hidden');
}
$('#photogrid').isotope( 'reloadItems' ).isotope();
mainimageElement.removeAttr('style');
thumbnailElements.removeAttr('style');
sortElement.removeAttr('style');
headerElement.removeClass('opaque');
setHeaderOpacity();
// put selected thumbnail back in its place
retractThumbnail(selectedThumbnail);
retractThumbnail(selectedSort);
setTimeout(function() {
// animate in other thumbnails
var delay = 0;
thumbnailElements.each(function() {
delay = delay + 10;
var $this = $(this);
setTimeout(function() {
$this.removeClass('background');
}, delay);
});
}, 1)
});
Thanks for helping :)