Develop Reference

Owl-Carousel changing image

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/

Add 'Active' class to URL Hash Navigation button

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;
}

OWL Carousel 2: URL Hash Navigation - Link to current slide

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

a href link not working in header tag

I'm creating a header with Struts2 links but somehow I encounter a very weird issue as I input the Struts2 a href link inside the header is encounter syntax error: unrecognized expression error inside jquery. But if I don't put the header tag the link I input will work alright. Does anyone faced this issue? i'm using jquery 1.11.
<%# page language="java" contentType="text/html;" %>
<%# taglib prefix="s" uri="/struts-tags" %>
<!-- this part the link would work -->
<div class="container">
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
<li class="animated wow fadeInLeft">
<s:url namespace="/sales" action="saleshome" var="aURL2" />
<s:a href="%{aURL2}">Test</s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
<li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
<li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
</li>
</ul>
</nav>
</div>
<!-- this part the link would not work -->
<header>
<div class="container">
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
<li class="animated wow fadeInLeft">
<s:url namespace="/sales" action="saleshome" var="aURL2" />
<s:a href="%{aURL2}">Test</s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
<li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
<li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
</li>
</ul>
</nav>
</div>
</header>
I encounter the following errors.
I think the following might be the cause of it. var section = $(this).attr('href'); seems like that part of the code for the link is causing issues.
$(document).ready(function(){
//Navigation menu scrollTo
$('header nav ul li a').click(function(event){
event.preventDefault();
var section = $(this).attr('href');
var section_pos = $(section).position();
if(section_pos){
$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
}
});
$('.app_link').click(function(e){
event.preventDefault();
$(window).scrollTo({top:$("#hero").position().top, left:'0px'}, 1000);
});
//Show & Hide menu on mobile
$('.burger_icon').click(function(){
$('header nav').toggleClass('show');
$('header .burger_icon').toggleClass('active');
});
//wow.js on scroll animations initialization
wow = new WOW(
{
animateClass: 'animated',
mobile: false,
offset: 50
}
);
wow.init();
//parallax effect initialization
$('.hero').parallax("50%", 0.3);
//Nice scroll initialization
$("html").niceScroll({
scrollspeed: 50,
autohidemode : false,
cursorwidth : 8,
cursorborderradius: 8,
cursorborder : "0",
background : "rgba(48, 48, 48, .4)",
cursorcolor : '#1f1f1f',
zindex : 999
});
//Testimonials slider initialization
$("#tslider").owlCarousel({
items : 1,
navigation : true,
pagination : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
responsive: true,
autoPlay : true,
transitionStyle : "fade"
});
//Mailchimp subscription form initialization
$('#submit_form').submit(function(){
$('#mc_submit').attr('disabled', 'disabled');
processing('icon', 'loading');
});
if($('#submit_form').length){
//Mailchim Subscription form
$('#submit_form').ajaxChimp({
callback: chimpResponce
});
}
//Mail chimp callback function
function chimpResponce(resp) {
if (resp.result === 'success') {
processing('loading', 'icon');
$('#mc_submit').removeAttr('disabled', 'disabled');
$('#submit_form #mc-email').val('');
$('#error_msg').hide();
$('#success_msg').show();
}else{
processing('loading', 'icon');
$('#success_msg').hide();
$('#error_msg').show();
$('#mc_submit').removeAttr('disabled', 'disabled');
}
}
function processing(hide, show){
$('#mc_submit i').removeClass(hide).addClass(show);
}
//Popup video
$('#play_video').click(function(e){
e.preventDefault();
var video_link = $(this).data('video');
video_link = '<iframe src="' + video_link + '" width="500" height="208" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
$('.about_video').append(video_link).fadeIn(200);
});
$('.close_video').click(function(e){
e.preventDefault();
$('.about_video').fadeOut(200,function(){
$('iframe', this).remove();
});
});
});

The error description is pretty explanatory: jQuery cannot use the expression /easyaccount/sales/saleshome as the selector inside $(...).
You are using scrollTo for scrolling to sections. And it seems that along anchor links (href="#somewhere") you have also links with full url. It's obvious that normal urls are not usable as jQuery selectors, so you have to filter links inside event handler.
$('header nav ul li a').click(function(event){
var section = $(this).attr('href');
if (section[0] !== "#") return; // drop the link if the first char is not #
var section_pos = $(section).position();
if(section_pos){
$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
}
event.preventDefault();
});

Portfolio Filter on a Horizontal Scroll Website not working

I'm just a graphic design student and I barely know about coding or javascript.
In my website, I have horizontal scroll with a left navigation bar with a fixed position. I want to filter all of my projects in different categories. For example, when I click on "Branding" all the branding projects show up and all the other projects disappear.
I've tried different options and none of them work. When I click on the filter it doesn't do anything.
I don't know if there is a problem with my html or the script. Please help me.
I used and kind of changed the jQuery from this website:
queness.com Below is all of my html and everything.
https://jsfiddle.net/PaulinaPaulino/hbk8z161/
<body>
<nav class="fixed-nav-bar">
<li>
<div id="home">
Paulina Paulino
</div>
</li>
<li>All</li>
<li>Branding</li>
<li>Editorial</li>
<li>Infographics</li>
<li>Photography</li>
<li>Poster</li>
<li>Typography</li>
<li>
<div id="about">
About
</div>
</li>
<li>
<div id="contact">
—paulinapaulino9#gmail.com
<div class="icons">
<a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
<a target="_blank" href="https://www.instagram.com/paulinapaulino/"> <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
<a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
<a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
</div>
</div>
</li>
</nav>
<div id="portfoliolist">
<div class="panel" data-cat="photography">
<div class="project1">
<a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
<p>Paint</p>
</a>
</div>
</div>
<div class="panel" data-cat="infographics">
<div class="project2">
<a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
<p>Online Affairs Infographic</p>
</a>
</div>
</div>
<div id="project3" class="panel">
</div>
<div id="project4" class="panel">
</div>
</div>
<script>
$(function() {
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.panel',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function() {
$(this).find('.label').stop().animate({
bottom: 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top: -30
}, 500, 'easeOutQuad');
},
function() {
$(this).find('.label').stop().animate({
bottom: -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top: 0
}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</body>

I just had to apply everything that this filter jQuery did from the link below.
http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours