Background Change to Css with thumbnail in JS - javascript

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.

Related

How to run the same Javascript code on a single page, with different directions ( owl carousel)?

I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}

You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})

Second div does not show on mouseover

I have a problem, where I wish to toggle two divs (each in a column of their own), when a mouse covers over an element on page.
At this point only div (.text_2) reacts when .item-2 is hovered, but I also need text.2.2 to react, and appear (this div is placed in the next column).
I have tried a couple of different things in order to make this work. for example this
$('.item-2').hover(function() {
$('.text_2').toggleClass('hide_default');
}, function(){
$('.button-rounded').toggleClass('hide_default') {
$('.text_2.2').toggleClass('hide_default');
});
});
Here's my code so far
$(".item-1").hover(function(){
$('#text_1').toggleClass('hide_default');
}, function(){
$('#text_1').toggleClass('hide_default');
});
$(".item-2").hover(function(){
$('.text_2').toggleClass('hide_default');
}, function(){
$('.text_2').toggleClass('hide_default');
});
/* Body */
* {
margin: auto;
padding: o;
}
html, body {
margin:0;
padding:0;
}
/* Header */
#main{
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
/* Contacts */
#contact{
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About{
margin: 50px;
}
/* Slider */
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white; color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
overflow: hidden;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
/* New slider */
#container_1{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="contact">
<div class="item item-1">
Sofia Bordoni
sofiabordoni#gmail.com
0045 9164 6938
About
</div>
</div>
<div id="container_1">
<div class="item" data-target="#text_2">
<img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px">
</div>
<div class="item" data-target="#text_3">
<img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px">
</div>
<div class="item" data-target="#text_4">
<img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px">
</div>
<div class="item" data-target="#text_5">
<img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px">
</div>
<div class="item" data-target="#text_6">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px">
</div>
<div class="item" data-target="#text_7">
<img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px">
</div>
<div class="item" data-target="#text_8">
<img class="Image" src="Images/plakat.png" width="250px">
</div>
<div class="item" data-target="#text_9">
<img class="Image" src="Images/mani-sito_2.png" width="250px">
</div>
<div class="item" data-target="#text_10">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px">
</div>
<div class="item" data-target="#text_11">
<img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px">
</div>
<div class="item" data-target="#text_12" >
<img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px">
</div>
<div class="item" data-target="#text_13" >
<img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px">
</div>
<div class="item" data-target="#text_14" >
<img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px">
</div>
<div class="item" data-target="#text_15" >
<img class="Image" src="Images/Betafactory.gif" width="450px">
</div>
<div class="item" data-target="#text_16" >
<img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px">
</div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br>
Candle
</p>
</div>
<div class="nav-item column column-3">
</div>
<div class="nav-item column column-3">
</div>
</div>
<script src="Onhover.js"></script>
<script src="HoverColor.js"></script>
</body>
</html>

You've already got the structure in the HTML from the previous answer I provided to use the data-target to genericise the logic and keep it DRY.
As such you just need to amend the selector in the data-target to match both the #text_2 and #text_2.2 element. Note that the . in the latter selector will need to be escaped so that it's not interpreted as a class selector.
$(".item").hover(function() {
$(this.dataset.target.replace('.', '\\.')).toggleClass('hide_default');
});
* {
margin: auto;
padding: o;
}
html,
body {
margin: 0;
padding: 0;
}
#main {
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
#contact {
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About {
margin: 50px;
}
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white;
color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
/* overflow: hidden; */
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
#container_1 {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="contact">
<div class="item item-1" data-target="#text_1">
Sofia Bordoni sofiabordoni#gmail.com 0045 9164 6938
About
</div>
</div>
<div id="container_1">
<!-- note additional id selector in data-target here -->
<div class="item" data-target="#text_2, #text_2.2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px"></div>
<div class="item" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px"></div>
<div class="item" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px"></div>
<div class="item" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px"></div>
<div class="item" data-target="#text_6"><img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px"></div>
<div class="item" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px"></div>
<div class="item" data-target="#text_8"><img class="Image" src="Images/plakat.png" width="250px"></div>
<div class="item" data-target="#text_9"><img class="Image" src="Images/mani-sito_2.png" width="250px"></div>
<div class="item" data-target="#text_10"><img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px"></div>
<div class="item" data-target="#text_11"><img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px"></div>
<div class="item" data-target="#text_12"><img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px"></div>
<div class="item" data-target="#text_13"><img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px"></div>
<div class="item" data-target="#text_14"><img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px"></div>
<div class="item" data-target="#text_15"><img class="Image" src="Images/Betafactory.gif" width="450px"></div>
<div class="item" data-target="#text_16"><img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px"></div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material
combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
<div class="nav-item column column-3"></div>
<div class="nav-item column column-3"></div>
</div>
A better approach would be to remove the . in the id attribute completely, as it avoids confusion with class selectors. Then the JS can be made even more simple:
<div class="nav-item column column-2">
<p class="hide_default" id="text_2_2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
$(".item").hover(function() {
$(this.dataset.target).toggleClass('hide_default');
});

Making multiple image carousels in same page independent

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>

css js slider that can be used multiple times on a single page

I would like to make CSS/jQuery slider that can be used multiple times on the same HTML page.
I have a customer that needs sliders as category links. So far I didn't manage to get it working as single slider on a page. Can someone check the code and point out what I am doing wrong? I don't know how to organize the project.
If someone can just write down the steps to take, I don't need code, how would this be done most efficiently I would really appreciate it.
var intervalid = {};
$(document).ready(function() {
function slide(elem) {
sliderid = $("#" + elem);
//console.log(sliderid);
//console.log(sliderid.find(".main_image"));
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "block");
});
sliderid.find(".main_image").on("mouseleave", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "none");
});
intervalid[elem] = setInterval(slidecycle(elem), 4500);
//myinter = setInterval(testcycle(elem), 4500);
//console.log(intervalid);
}
function testcycle(elem) {
console.log("cycle");
}
function slidecycle(elem) {
//console.log("slidecycle");
sliderid = $("#" + elem); //id elementa
//console.log(sliderid.find(".imgs_holder > .image"));
var lastimage = sliderid.find(".imgs_holder > .image:last").hasClass("active"); // last image to cycle
var currentimage = sliderid.find(".imgs_holder > .image.active"); // find current image
// Check if last image, else use next()
if (lastimage) {
var nextimage = sliderid.find(".image_thumb > .image:first")
} else {
var nextimage = sliderid.find(".imgs_holder > .image.active").next();
}
// Switch active image from current to next()
$(currentimage).removeClass("active");
$(nextimage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextimage).find('img').attr("alt");
var imgSrc = $(nextimage).find('img').attr("src");
var imgTitle = $(nextimage).find('a').attr("href");
var imgDesc = $(nextimage).find('.desc').html();
var imgDescHeight = sliderid.find(".main_image").find('.main-desc').height();
console.log(nextimage);
$(nextimage).css("background-color", "#efefef");
//Switch image
sliderid.find(".main_image .main-desc").animate({
opacity: 0,
marginBottom: -imgDescHeight
}, 250, function() {
sliderid.find(".main_image .main-desc").html(imgDesc).animate({
opacity: 0.85,
marginBottom: "0"
}, 250);
sliderid.find(".main_image img").attr({
src: imgSrc,
alt: imgAlt,
name: imgAlt
});
});
}
slide("slider1");
slide("slider2");
});
html {
font-family: arial;
font-size: 1em;
}
.imgs_holder {
width: 100%;
}
.image {
width: auto;
height: 150px;
display: inline-block;
margin-right: 20px;
line-height: 150px;
padding: auto;
margin: auto;
background-color: black;
}
.image a>img {
width: 200px;
height: auto;
margin: auto;
padding: 0 10px;
vertical-align: middle;
}
.main-desc {
position: absolute;
color: black;
z-index: 100;
padding: 10px;
margin: 0;
top: 65%;
bottom: 0;
width: 873px;
background-color: black;
opacity: .7;
color: white;
display: none;
}
.main_image {
position: relative;
width: 893px;
}
.main_image img {
width: 893px;
}
.desc {
display: none;
}
.slideshow {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image active">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
<div class="slideshow" id="slider2">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" />
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>

You have a lot of errors in your code.
Firstly I reccommend naming jQuery variables with dollar sign at the begining $. Eg. var $test = $(".test");
That way you won't do unnecessary jQuery call, like in your case
...
var nextimage = sliderid.find(".image_thumb > .image:first");
...
var imgAlt = $(nextimage).find('img').attr("alt");
...
nextimage variable is already an jQuery object so $() is unnecessary.
Secondly, you check your current element as an element with class active and next element as next element after current. But what if there is no element with class active at the begining like in your case in second slider?
You should take that under consideration.
Thirdly, when you call setInterval function you should do it like this
setInterval(function() {
slidecycle(elem);
}, 4500);
Last but not least try to elminate jQuery calls to minimum as it is time and memory consuming. Do not repeat yourself - if for example you do some action for the same element mopre than one time, save that element to variable.
Example:
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "block");
});
sliderid.find(".main_image").on("mouseleave", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "none");
});
To
var $main = sliderid.find(".main_image"),
$mainDesc = $(this).find(".main-desc");
$main.on("mouseover", function() {
//alert("hover");
$mainDesc.css("display", "block");
});
$main.on("mouseleave", function() {
//alert("hover");
$mainDesc.css("display", "none");
});
Or
var $mainDesc = $(this).find(".main-desc");
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$mainDesc.css("display", "block");
})
.on("mouseleave", function() {
//alert("hover");
$mainDesc.css("display", "none");
});
Here is an working example:
var intervalid = {};
$(document).ready(function() {
function slide(elem) {
var $slider = $("#" + elem);
var $description = $slider.find(".main-desc");
$slider.find(".main_image").on("mouseover", function() {
$description.show();
})
.on("mouseleave", function() {
$description.hide();
});
intervalid[elem] = setInterval(function() {
slidecycle($slider)
}, 2000);
}
function slidecycle($slider) {
var lastimage = $slider.find(".imgs_holder .image:last").hasClass("active");
var $currentImage = $slider.find(".imgs_holder .image.active");
if ($currentImage.length <= 0) {
$currentImage = $slider.find(".imgs_holder .image:last");
lastimage = true;
}
if (lastimage) {
var $nextimage = $slider.find(".imgs_holder .image:first");
} else {
var $nextimage = $currentImage.next();
}
$currentImage.removeClass("active");
$nextimage.addClass("active");
var imgAlt = $nextimage.find('img').attr("alt");
var imgSrc = $nextimage.find('img').attr("src");
var imgTitle = $nextimage.find('a').attr("href");
var imgDesc = $nextimage.find('.desc').html();
var imgDescHeight = $slider.find(".main_image").find('.main-desc').height();
$slider.find(".main_image .main-desc").animate({
opacity: 0,
marginBottom: -imgDescHeight
}, 250, function() {
$slider.find(".main_image .main-desc").html(imgDesc).animate({
opacity: 0.85,
marginBottom: "0"
}, 250);
$slider.find(".main_image img").attr({
src: imgSrc,
alt: imgAlt,
name: imgAlt
});
});
}
slide("slider1");
slide("slider2");
});
html {
font-family: arial;
font-size: 1em;
}
.imgs_holder {
width: 100%;
}
.image {
width: auto;
height: 150px;
display: inline-block;
margin-right: 20px;
line-height: 150px;
padding: auto;
margin: auto;
background-color: black;
}
.image.active {
background-color: #efefef
}
.image a>img {
width: 200px;
height: auto;
margin: auto;
padding: 0 10px;
vertical-align: middle;
}
.main-desc {
position: absolute;
color: black;
z-index: 100;
padding: 10px;
margin: 0;
top: 65%;
bottom: 0;
width: 873px;
background-color: black;
opacity: .7;
color: white;
display: none;
}
.main_image {
position: relative;
width: 893px;
}
.main_image img {
width: 893px;
}
.desc {
display: none;
}
.slideshow {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
<div class="main_image">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1">
<div class="main-desc">
<h3>Subject 1</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image active">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1">
<div class="desc">
<h3>Subject 1</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner02.jpg" alt="Slika 2" name="Slika 2">
<div class="desc">
<h3>Subject 2</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner03.jpg" alt="Slika 3" name="Slika 3">
<div class="desc">
<h3>Subject 3</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner04.jpg" alt="Slika 4" name="Slika 4">
<div class="desc">
<h3>Subject 4</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
<div class="slideshow" id="slider2">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1">
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner02.jpg" alt="Slika 2" name="Slika 2">
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner03.jpg" alt="Slika 3" name="Slika 3">
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<img src="images/banner04.jpg" alt="Slika 4" name="Slika 4">
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>

jQuery custom plugin changes applied to all instances

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

Categories