We Keep Coding

Making multiple image carousels in same page independent - javascript

I found these carousels (after trying half a dozen similar carousels which broke down when placed in bootstrap modals) …originally the custom js function was attached to IDs and I changed that to class names to get the other carousels to show up.
The problem now is that the carousels are not independent, clicking on thumbnails changes the main image across all carousels; furthermore, the .synced class which differentiates the active thumbnail works only for the first carousel.
Is there a way to make them independent without adding IDs to the JS? I'm adding the content with PHP; I think I can only add IDs to the HTML (the modals already pull a unique ID for each gallery from the posts)
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

set secondary and primary variables when thumbnails and arrows clicked,
var secondary= $(el).siblings('.thumbnails-wrapper');
var primary= $(this).parents('.component').find('.owl-carousel');
var primary = $(".main-carousel");
var secondary = $(".thumb-carousel");
$(document).ready(function() {
primary.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination : false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
navigation : true,
navigationText : ["",""]
});
secondary.owlCarousel({
items : 7,
itemsDesktop : [1200,8],
itemsDesktopSmall : [992,7],
itemsTablet : [768,6],
itemsMobile : [480,4],
pagination : false,
responsiveRefreshRate : 100,
navigation : true,
navigationText : ["",""],
afterInit : function(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
var secondary= $(el).siblings('.thumbnails-wrapper');
secondary.find(".owl-item").removeClass("synced").eq(current).addClass("synced");
if (secondary.data("owlCarousel") !== undefined) {
center(current);
}
$('.current-item').html(this.owl.currentItem + 1);
$('.max-items').html(this.owl.owlItems.length);
}
secondary.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).data("owlItem");
var primary= $(this).parents('.component').find('.owl-carousel');
primary.trigger("owl.goTo",number);
});
function center(number) {
var sync2visible = secondary.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found===false) {
if (num>sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", num - sync2visible.length+2);
} else{
if (num - 1 === -1) {
num = 0;
}
secondary.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length-1]) {
secondary.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
secondary.trigger("owl.goTo", num-1);
}
}
});
$( ".collapse-button" ).click(function() {
var thumbnailsWrapper = $('.thumbnails-wrapper');
if(thumbnailsWrapper.position().top < thumbnailsWrapper.parent().height() - 1){
thumbnailsWrapper.animate({bottom: '-' + thumbnailsWrapper.outerHeight() +'px'});
thumbnailsWrapper.find('.icon').addClass('-flip');
}
else {
thumbnailsWrapper.animate({bottom: '0'});
thumbnailsWrapper.find('.icon').removeClass('-flip');
}
});
body {
margin: 12px;
}
.component {
position: relative;
overflow: hidden;
width: 300px;
max-height: 300px;
background: tomato;
margin: 0 auto 12px;
}
.main-carousel .owl-prev {
left: 10px;
}
.main-carousel .owl-prev:after {
border-right: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-next {
right: 10px;
}
.main-carousel .owl-next:after {
border-left: 15px solid rgba(0, 0, 0, 0.5);
}
.main-carousel .owl-prev, .main-carousel .owl-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
opacity: 0.5;
}
.main-carousel .owl-prev:after, .main-carousel .owl-next:after {
content: '';
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.main-carousel .item {
height: 200px;
}
.thumbnails-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.thumbnails-wrapper .item {
margin: 5px;
cursor: pointer;
height: 36px;
}
.thumbnails-wrapper .item .image {
border: 2px solid #fff;
max-height: 36px;
}
.thumbnails-wrapper .synced .image {
border-color: #1699FF;
}
.thumbnails-wrapper .owl-prev, .thumbnails-wrapper .owl-next {
position: absolute;
height: 11px;
width: 1px;
bottom: 50%;
transform: translate(-50%, 0);
}
.thumbnails-wrapper .owl-prev:after, .thumbnails-wrapper .owl-next:after {
content: '';
display: inline-block;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.thumbnails-wrapper .owl-prev {
left: -15px;
}
.thumbnails-wrapper .owl-prev:after {
border-right: 9px solid #fff;
}
.thumbnails-wrapper .owl-next {
right: -5px;
}
.thumbnails-wrapper .owl-next:after {
border-left: 9px solid #fff;
}
.item {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
height: auto;
display: block;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<div class="component">
<div class="owl-carousel main-carousel">
<div class="item">
<img src="http://placehold.it/600x400/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/600x400/FFAFD9" alt="" class="image" />
</div>
</div>
<div class="thumbnails-wrapper">
<div class="owl-carousel thumb-carousel">
<div class="item">
<img src="http://placehold.it/120x80/E8D48E" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFBAA9" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/C88EE8" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/B5E1FF" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFFEA2" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/E8BF94" alt="" class="image" />
</div>
<div class="item">
<img src="http://placehold.it/120x80/FFAFD9" alt="" class="image" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Related

good day.... is there a way to change the background image of div while using Slick.Js ? say for example, if i press one of the image thumbnail, the background of div would change. so far my code is not reliable when it comes for example different image sizes
im not sure how to change the background image of div if i press each images in the slick carousel
$(document).ready(function() {
$('.slider-for').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
fade: true,
asNavFor: '.thumbnails'
});
$('.thumbnails').slick({
slidesToShow: 9,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000
});
});
* {
margin: 0 auto;
padding: 0
}
body {
font-family: "Open Sans", sans-serif;
color: black;
}
.slid {
width: 100%;
}
.thumbnail-img {
cursor: pointer;
}
.slider-for {
position: relative;
width: 100%;
}
.thumbnails {
margin-top: -300px;
}
.cc {
position: relative;
}
.slider-for {
position: absolute;
}
.some {
z-index: 9999;
position: absolute;
}
/** HEADER **/
.banner-img {
background-size: fill;
width: 100%;
}
.header {
display: block;
width: 80%;
height: 1020px;
margin: auto;
color: white;
}
.container {
width: 1440px;
}
.navbar {
padding-top: 20px;
}
.navbar a {
color: black;
text-decoration: none;
}
.logo {
float: left !important;
}
.navlink {
float: right;
}
.navlink li {
float: left;
margin-left: 100px;
list-style: none;
}
.hero-text {
margin-top: 100px;
float: left !important;
}
.hero-text h1 {
font-size: 75px;
font-weight: 900;
}
.hero-text h2 {
font-size: 40px;
font-weight: 300;
}
.hero-text p {
margin-top: 100px;
font-size: 22px;
font-weight: 300;
}
<!-- slick slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<div class="slid">
<div class="slider3">
<div class="cc">
<div class="some">
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<h3>B2B DESIGN</h3>
</div>
<div class="navlink">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="container hero-text">
<h1>Unlimited Lorem for <br>unlimited ipsume</h1>
<h2>& Fusce feugiat congue ipsum</h2>
<p>Ut vel orci sem. Morbi quis diam ac ligula ultricies <br>Ut eget massa ornare, porta elit quis, porttitor leo. Nulla facilisi. </p>
</div>
</div>
<!-- container -->
</div>
<!-- end header -->
</div>
<!-- some-->
<div class="slider-for">
<div>
<img class="banner-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://tz-mag-media.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2018/02/26144641/image101.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy">
</div>
</div>
<!-- slider-for -->
</div>
<div class="thumbnails">
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
</div>
<!-- thumbnails -->
</div>
<!-- slider 3-->
</div>
<!--slid-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

In a way, it's already working, though it's an image tag and not a background.
The problem is because the header (cf. .some) is in front of your carrousel. You end up not being able to click on the elements, so if you remove the z-index rule from:
.some {
/* z-index: 9999; */
position: absolute;
}
It'll work as expected.
However, you'll have to remake your HTML structure to get both your texts and the functionality. Or at least change some CSS rules, but it can end to get pretty hacky.

I am trying to create a slider and everything works well, but when i resize the browser the position of the elements is resizing too and that is because when i click on the arrows of the slider i apply to each element a transform: translateX().
If i don't resize the browser the slider works like it should.Is there a way to stop changing the position of the elements when the browser is resized and stop them moving?
When you run the code put it in full page and after clicking the arrows resize the window to see what I am talking about.
I couldn't find a solution so any help is really appreciated.You can find the code below.
const rightArrow = document.querySelector('.right');
const leftArrow = document.querySelector('.left');
const movieTitles = document.querySelectorAll('.movie-title');
const movieContainer = document.querySelector('.movie-container');
const arrowRight = document.querySelector('.fa-chevron-right');
let movieCounter = 0;
let rightStop = 0;
const carouselSlide = function() {
if(this.classList.contains('left') && allSlideWidth === 0) return;
let containerWidth;
let paddingLeft;
let paddingRight;
movieContainerChilds = [...movieContainer.children];
containerWidth = +window
.getComputedStyle(movieContainer)
.getPropertyValue('width')
.slice(0, -2);
paddingLeft = +window.
getComputedStyle(movieContainer)
.getPropertyValue('padding-left')
.slice(0, -2);
paddingRight = +window
.getComputedStyle(movieContainer)
.getPropertyValue('padding-right')
.slice(0, -2);
let movieTitleWidth = Number(movieContainerChilds[0].getBoundingClientRect().width) + 4;
rightStop = Math.round((+containerWidth - (+paddingLeft + +paddingRight)) / movieTitleWidth);
if(this.classList.contains('right')) {
allSlideWidth += Math.round(+containerWidth - (+paddingLeft + +paddingRight));
movieCounter += rightStop;
}
if(this.classList.contains('left')) {
allSlideWidth -= Math.round(+containerWidth - (+paddingLeft + +paddingRight));
movieCounter -= rightStop;
};
movieContainerChilds.forEach((movie) => {
if(movieContainerChilds.length - rightStop <= movieCounter + rightStop) {
movie.style.transform = `translateX(-${allSlideWidth + (Math.round(movieTitleWidth) * (movieContainerChilds.length - (movieCounter + rightStop)))}px`;
} else {movie.style.transform = `translateX(-${allSlideWidth}px)`;
}
})
movieContainer.addEventListener('transitionend', function() {
allSlideWidth > 0 ? leftArrow.style.display = 'flex' : leftArrow.style.display = 'none';
movieContainerChilds.length - rightStop <= movieCounter + rightStop ? rightArrow.style.display = 'none' : rightArrow.style.display = 'flex';
rightArrow.addEventListener('click', carouselSlide);
leftArrow.addEventListener('click', carouselSlide);
})
movieContainer.addEventListener('transitionstart', function() {
rightArrow.removeEventListener('click', carouselSlide);
leftArrow.removeEventListener('click', carouselSlide);
})
}
let allSlideWidth = 0;
rightArrow.addEventListener('click', carouselSlide);
leftArrow.addEventListener('click', carouselSlide);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
background: #161414;
overflow: hidden;
}
section {
overflow-x: visible;
width: 100%;
position: relative;
}
.movie-container {
padding: 0 60px;
margin-top: 20px;
white-space: nowrap;
transition: .7s ease all;
}
.movie-container::-webkit-scrollbar {
display: none;
}
.movie-title {
display: inline-block;
width: calc(16.66666% - 4px);
height: 250px;
padding: 0;
margin: 0;
transition: .7s ease all;
margin-bottom: -10px;
}
.movie-title:hover {
transform: scale(1.5);
}
.movie-title img {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.left, .right {
position: absolute;
background: rgb(0, 0, 0, .3);
height: 100%;
width: 60px;
top: 0;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
}
.left {
left: -4px;
border-radius: 0 5px 5px 0;
height: 100%;
display: none;
}
.right {
right: 0.1px;
border-radius: 5px 0 0 5px;
height: 100%;
}
.right:hover, .left:hover {
background: rgb(0, 0, 0, .65);
}
#media (max-width: 1400px) {
.movie-title {
width: calc(20% - 4px);
}
}
#media (max-width: 1000px) {
.movie-title {
width: calc(25% - 4px);
}
}
#media (max-width: 800px) {
.movie-container {
padding: 0 20px;
overflow-x: scroll;
}
.movie-title {
width: 32.88888666%;
margin-right: 4px;
}
.left, .right {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
</div>
<section>
<div class="movie-container">
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
<div class="movie-title">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
</div>
</div>
<div class="left"><i class="fas fa-chevron-left"></i></div>
<div class="right"><i class="fas fa-chevron-right"></i></div>
</section>
</body>
</html>

You are using two transforms:
.movie-title: hover {
transform: scale (1.5);
}
When you add it, the previous one collapses
translateX (0px);
transform: translateX(0px) scale(1.5); <--- That's right
So wrong, because one deletes the other
transform: scale(1.5);
transform: translateX(0px);
You can simply add one div:
HTML
.test:hover {
transform: scale(1.5);
}
<div class="movie-title">
<div class="test">
<img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt="">
<div>
</div>
It works, good luck

I am trying to get a thumbnail with filter to work on my site. I have been using this one at codepen as inspiration. It is working without any problem at codepen but as soon I insert the code into my wordpress site (using divi. theme) the filtering is not working at all.
In the code below I have changed the style from #port to #portiz and .btn to .butn. I made this changes because I noticed it override the existing styling and I also wanted to test out if this was the problem. I have also made the same changes in the JS and the HTML.
I cant figure out where or what to change, or add.
Best,
Ray
<script>
$(function() {
var selectedClass = "";
$(".fil-cat").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portiz").fadeTo(100, 0.1);
$("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portiz").fadeTo(300, 1);
}, 300);
});
});
</script>
#portiz{
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.butn {
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.butn:hover {
text-decoration: none;
}
.butn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
<div class="toolbar mb2 mt2">
<button class="butn fil-cat" href="" data-rel="all">All</button>
<button class="butn fil-cat" data-rel="web">Websites</button>
<button class="butn fil-cat" data-rel="flyers">Flyers</button>
<button class="butn fil-cat" data-rel="bcards">Business Cards</button>
</div>
<div style="clear:both;"></div>
<div id="portiz">
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
</div>
<div style="clear:both;"></div>

Your JS is kinda messy, but it works. You just have a couple of mistakes in your SO snippet:
You shoudn't include <script></script> tags in the JS editor
You forgot to include jQuery, so in your example $ is not defined.
Besides that, it works:
$(function() {
var selectedClass = "";
$(".fil-cat").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portiz").fadeTo(100, 0.1);
$("#portiz div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portiz").fadeTo(300, 1);
}, 300);
});
});
#portiz{
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.butn {
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.butn:hover {
text-decoration: none;
}
.butn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar mb2 mt2">
<button class="butn fil-cat" href="" data-rel="all">All</button>
<button class="butn fil-cat" data-rel="web">Websites</button>
<button class="butn fil-cat" data-rel="flyers">Flyers</button>
<button class="butn fil-cat" data-rel="bcards">Business Cards</button>
</div>
<div style="clear:both;"></div>
<div id="portiz">
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
</div>
<div style="clear:both;"></div>

I have created this JavaScript function it works if I use it for 1 gallery but if I use it for 2 it changes the gallery in the first one, I know I'm close but can't quite seam to figure out this last bit, do I need to use .each function?
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
$('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
$('.big-photo img').attr('src', path);
});
return this
}
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>

You can make use of the container class. As the main container have a class, inside the event handler, get this element and use this to get the other elements associated(are children of this container) with this instance.
So, instead of global selectors
$('.big-photo img').attr('src', path);
which will select all the matching elements on the page, use descendant selector with find().
container.find('.big-photo img').attr('src', path)
Code:
$('.photo-thumbnails .thumbnail').click(function () {
// Get the main container of the gallery
var container = $(this).closest('.gallery-photos');
// Use that container to get elements inside it
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', path);
});
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
var container = $(this).closest('.gallery-photos');
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
container.find('.big-photo img').attr('src', path);
});
return this;
};
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
Suggestion:
$('.photo-thumbnails .thumbnail').click(function () {
// Cache this instance
var $this = $(this);
// Get the main container of the gallery
var container = $this.closest('.gallery-photos');
// Select only the thumbnail elements having current class
container.find('.photo-thumbnails .thumbnail.current').removeClass('current');
$this.addClass('current');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', $this.find('img').attr('src'));
});

This is the code for my owl-carousel.
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: false,
lazyLoad: true
});
});
I need to scroll the carousel slowly, when I hover on the "prev" or "next' buttons.
Is anyone know how to do this?
FIDDLE

Add this JS
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
Your complete JS should look like this
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: false,
lazyLoad: true,
});
$(".owl-inner").hover(function() {
$(".owl-prev").show();
$(".owl-next").show();
}, function() {
$(".owl-prev").hide();
$(".owl-next").hide();
});
$(".owl-prev").hide();
$(".owl-next").hide();
});
#owl-demo .owl-item > div img {
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom:4px;
margin:0px 50px;
}
#owl-demo .owl-item > div {
padding: 0px 2px
}
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: 0px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>
<div id="owl-demo" class="owl-carousel">
<div class="owl-inner">
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
</div>
</div>
Reference