why not work multiple Thumbs gallery with swipre on one page - javascript

I have a page with three slides (pageSwiper).
The scenario is that when each of these slides is clicked, a modal will open and there will be a "Thumbs gallery" inside each modal (mySwiper2 , mySwiper).
But due to the existence of several "Thumbs gallery", these (swiper-button-next, swiper-button-prev) items do not work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var swiperpage = new Swiper(".pageSwiper", {
spaceBetween: 30,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
.page--slider{
padding: 0 56px;
height: 600px;
margin-bottom: 50px;
padding: 2rem;
}
.pageSwiper .swiper {
width: 100%;
height: 100%;
}
.pageSwiper .swiper-slide {
background-position: center;
background-size: cover;
}
.pageSwiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pageSwiper .swiper-button-next,
.pageSwiper .swiper-button-prev{
color: rgba(0,0,0,.8) !important;
}
.pageSwiper .swiper-button-next:after,
.pageSwiper .swiper-button-prev:after {
font-size: 40px !important;
font-weight: bolder !important;
}
.pageSwiper .swiper-pagination-bullet {
width: 13px !important;
height: 13px !important;
background: rgba(0,0,0,.5) !important;
}
.pageSwiper .swiper-pagination-bullet:hover{
background: rgba(0,0,0,.7) !important;
}
.pageSwiper .swiper-pagination-bullet-active{
background: rgba(0,0,0,.9) !important;
}
/* The Modal */
.modal {
display: none;
position: fixed;
z-index: 1100;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
border: 2px solid red;
}
.modal-content {
-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
width: 50%;
height: 450px;
max-height: 90%;
padding: 0 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 2px solid green;
background-color: var(--cw);
border-radius:8px;
padding: 13px;
display: flex;
flex-direction: column;
}
.modal-content-slider{
width: 100%;
height: 85%;
border: 2px solid black;
}
.modal-content-buttons{
width: 100%;
height: 15%;
border: 2px solid red;
}
.modal-content-close{
width:40px;
height:40px;
background-color: black;
border-radius:50%;
margin-left: auto;
margin-top: 0.5rem;
position: relative;
}
.close {
color: var(--cw);
position: absolute;
text-shadow: 0px 1px 2px rgb(0 0 0 / 90%);
font-size: 40px;
font-weight: 100;
cursor: pointer;
left: 50%;
top: 50%;
margin: auto 0;
transform: translate(-50%, -50%);
}
.close:hover{
opacity: .5;
}
/* swiper Modal */
.modal .swiper {
width: 100%;
height: 100%;
}
.modal .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.modal .swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.modal .swiper-slide {
background-size: cover;
background-position: center;
}
.modal .mySwiper2 {
height: 80%;
width: 100%;
}
.modal .mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.modal .mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.modal .mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<div class="page--slider">
<div class="swiper pageSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-12.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" class="myBtn_multi"/>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- The Modals -->
<div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
</div>


Here is the answer to this question:
https://raddy.co.uk/blog/multiple-instances-of-swiperjs-on-the-same-page-with-the-same-settings/
Create a few sliders with the same class name of “swiper-container” ( you can add as many as you want). Your code should look similar to mine:
HTML:
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
Now we need to select the class name "swiper-container", loop through each available element (example: div, section) on the page and then add a new unique class name to each to initialize unique Swipers.
const myCustomSlider = document.querySelectorAll('.swiper-container');
for( i=0; i< myCustomSlider.length; i++ ) {
myCustomSlider[i].classList.add('swiper-container-' + i);
var slider = new Swiper('.swiper-container-' + i, {
/* Options */
});
}

Related

How to get div height based on image height?

I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container

After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

I want to add a circular ripple hover effect on image

I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
Above Link shows the ripple effect on button and below is my code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image
<html>
<div class="row">
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
</div>
<!--Second container-->
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text{
position: relative;
}
.div-with-image-and-text .text {
display:none;
}
.div-with-image-and-text:hover img{
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text{
display: block;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%);
text-align:center;
font-family: 'Muli';
color:white;
font-size: 30px;
text-shadow:0 0 10px gray;
}

this way give you ripple effect without your effect that you give with hover
first make a html file and write this code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
anf after that make a css file behind your html file and write this code in cssFile
index.css
/* #keyframes shake {
25% {
transform: rotate(calc(var(--angle) * -1));
}
50% {
transform: rotate(var(--angle));
}
100% {
transform: rotate(0deg);
}
} */
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER:hover {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}

Simple CSS solution for the Ripple Effect:
A working example: https://next.plnkr.co/edit/i3HhQVIzlbq5QzGM?preview
HTML
<div class="ripple-effect-container">
<img src="https://www.w3schools.com/w3images/wedding.jpg">
</div>
CSS
.ripple-effect-container {
width: 200px;
height: 200px;
background-position: center;
transition: background 0.2s;
background-color: #063458;
}
.ripple-effect-container:hover {
background: #063458 radial-gradient(circle, transparent 1%, #063458 1%) center/15000%;
}
.ripple-effect-container:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
.ripple-effect-container img:hover {
opacity: 0.5;
}
.ripple-effect-container img {
object-fit: contain;
width: 100%;
height: 100%;
transition: 0.2s;
}

How remove the extra space in multiple swiper tabs suitable to all media queries using javascript?

I am trying to create a tab slider using javascript with the tabs having fixed size.It also has to support all devices(using media query).
I have created the similar slide.But I am facing problems while viewing in mobile tab view.
I need a pattern similar to the following link:
https://www.vecteezy.com/free-vector/banner-template
I have tried.But in mobile the tabs is getting hide.last tabs are not visible.I dont know where the problem comes?
var swiper = new Swiper('.swiper-container', {
slidesPerView: 6,
slidesPerGroup: 1,
loop: false,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
1300: {
slidesPerView: 8,
},
1199: {
slidesPerView: 6,
},
991: {
slidesPerView: 4,
},
600: {
slidesPerView: 2,
},
}
});
.swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23444444'%2F><%2Fsvg>") !important;
}
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23444444'%2F%3E%3C%2Fsvg%3E") !important;
}
#media screen and (min-width: 1200px){
.tab_wrapper{
width: 100%;
}
.swiper-container {
width: calc(100% - 100px);
}
.swiper-wrapper {
width: 100%;
}
}
#media screen and (max-width: 1200px){
/* .tab_wrapper{
width: 600px;
}
.swiper-container {
width: 500px;
}
.swiper-wrapper {
width: 500px;
}*/
.tab_wrapper{
width: 100%;
}
.swiper-container {
width: calc(100% - 100px);
}
.swiper-wrapper {
width: 100%;
}
}
.tab_wrapper{
margin: 0 auto;
position: relative;
overflow: hidden;
/*width: 1200px;*/
box-sizing: border-box;
}
.swiper-container {
/*width: 1000px;*/
margin: 0 auto;
position: relative;
overflow: hidden;
border: 1px solid red;
box-sizing: border-box;
}
.swiper-wrapper {
width: 1000px;
position: relative;
/*width: 100%; */
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-slide p{
width: 100px;
}
.swiper-slide{
border:1px solid red;
box-sizing: border-box;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
/*width: 100%;*/
width: auto!important;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
}
.swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-next{
right:0;
}
.swiper-button-prev{
left:0;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<div class="tab_wrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Tab 1</p>
</div>
<div class="swiper-slide">
<p>Tab 2</p>
</div>
<div class="swiper-slide">
<p>Tab 3</p>
</div>
<div class="swiper-slide">
<p>Tab 4</p>
</div>
<div class="swiper-slide">
<p>Tab 5</p>
</div>
<div class="swiper-slide">
<p>Tab 6</p>
</div>
<div class="swiper-slide">
<p>Tab 7</p>
</div>
<div class="swiper-slide">
<p>Tab 8</p>
</div>
<div class="swiper-slide">
<p>Tab 9</p>
</div>
<div class="swiper-slide">
<p>Tab 10</p>
</div>
<div class="swiper-slide">
<p>Tab 11</p>
</div>
<div class="swiper-slide">
<p>Tab 12</p>
</div>
<div class="swiper-slide">
<p>Tab 13</p>
</div>
<div class="swiper-slide">
<p>Tab 14</p>
</div>
<div class="swiper-slide">
<p>Tab 15</p>
</div>
<div class="swiper-slide">
<p>Tab 16</p>
</div>
<div class="swiper-slide">
<p>Tab 17</p>
</div>
<div class="swiper-slide">
<p>Tab 18</p>
</div>
<div class="swiper-slide">
<p>Tab 19</p>
</div>
<div class="swiper-slide">
<p>Tab 20</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
In my mobile view the 20th tab is not visible while clicking next button.Please help how to dispaly all tabs in mobile and tab view?
Also empty space appears in the last after 20th tab.I sholud automatically get fixed to the outer container when multiple tabs are added.

Editing JavaScript code for W3School slideshow

I want to add a slideshow from W3School to my site, the problem is I need more than 1 slideshow and the JavaScript code from W3School works for a single slideshow only.
Searching for an answer here on StackOverflow I've found an user who had the same problem as me and we did the same things as well to try to adapt the script to our needs...without sucess obviously.
A user answered posting an edited script that should works for more than a slideshow and I'm trying to use that script for my slideshows but for some reason it works for only 1 slideshow.
Here is the answer I am referring to: https://stackoverflow.com/a/46727534/9276807
And here are my slideshows:
var slideIndex = new Array(2);
slideIndex[0] = 1;
slideIndex[1] = 1;
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, slideshownumber) {
slideIndex[slideshownumber] = slideIndex[slideshownumber] + n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function currentSlide(n, slideshownumber) {
slideIndex[slideshownumber] = n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function showSlides(n, slideshownumber) {
var i;
var slideshowname = "slider" + slideshownumber;
var slides = document.getElementsByName(slideshowname);
if (n > slides.length) {
slideIndex[slideshownumber] = 1;
}
if (n < 1) {
slideIndex[slideshownumber] = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex[slideshownumber] - 1].style.display = "block";
}
.tooltip {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #000000;
}
.tooltip:hover .info,
.tooltip:focus .info {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -980px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #000000;
}
.slideshow-container {
width: 100%;
height: 300px;
position: relative;
margin: 0;
padding: 0;
}
.mySlides {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.slideshow-container .imgsl {
position: relative;
width: 100%;
height: 300px;
}
.slideshow-container .cptn {
background-color: rgba(242, 242, 242, 0.5);
color: #FFFFFF;
font-size: 25px;
padding: 8px 0 15px 0;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 140px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(242, 242, 242, 0.3);
}
.text {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover,
.more:focus {
background-color: green;
color: #FFFFFF;
}
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno.jpg">
<div class="cptn">Passignano Sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno2.jpg">
<div class="cptn">Castello del Leone, Castiglione del Lago</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno3.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno4.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<a class="prev" onclick="plusSlides(-1,0)">❮</a>
<a class="next" onclick="plusSlides(1,0)">❯</a>
</div>
<script>
currentSlide(1, 0)
</script>
<div class="text">...</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>
, il lago di
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides2(-1,1)">❮</a>
<a class="next" onclick="plusSlides2(1,1)">❯</a>
</div>
<script>
currentSlide(1, 1)
</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
Can someone help me to understand where I'm doing wrong?
Thanks in advance!

You are getting the Error:
"Uncaught ReferenceError: currentSlide is not
So, currentSlide() is trying to invoke before it is defined!
Make sure your JS codes (defining function currentSlide(n, slideshownumber){}... ) are executing first before it is invoked.
Also, Invoke plusSlides() not plusSlides2() for Piediluco slide:
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides(-1,1)">❮</a>
<a class="next" onclick="plusSlides(1,1)">❯</a>
</div>
<script> currentSlide(1,1)</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
also change:
<script> $(document).ready(function(){ currentSlide(1,1) })</script>

Swiper slider not working as expected with loop: true and centeredSlides: false

Swiper slider is not working properly with loop set to true and centeredSlides set to false.
When a thumbnail or a navigation arrow is clicked the main slider doesn't show the active thumbnail, i searched and didn't found any solution for this, i'll be grateful if someone knows how to solve it without having to remove none current options.
Here's the JSFiddle
var galleryTop = new Swiper('.gallery-top', {
slidesPerView: 1,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
direction: 'vertical',
slidesPerView: 4,
slideToClickedSlide: true,
spaceBetween: 10,
loop: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
body {
padding: 20px;
}
.gallery-thumbs {
float: left;
width: calc(16% - 20px);
height: 280px;
margin-right: 20px;
}
.gallery-thumbs .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
cursor: pointer;
}
.gallery-thumbs .swiper-slide-active {
border: 1px solid grey;
}
.gallery-thumbs .swiper-slide:hover {
border: 1px solid grey;
}
.gallery-top {
float: left;
width: 84%;
height: 280px;
}
.gallery-top .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
<div class="swiper-slide">6</div>
</div>
</div>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
<div class="swiper-slide">6</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

You can Do Something Like this
HTML
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
</div>
CSS
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 70%;
margin: 0;
margin-left: auto;
}
.gallery-thumbs {
//height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs.swiper-container {
padding: 10px;
margin: 0px;
}
.gallery-thumbs .swiper-slide {
height: 30%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
border: 2px solid #ffa303;
}
.gallery-top{
float:right;
width:80%;
}
.gallery-thumbs{
float:left;
width:20%;
height:80%;
}
JS
var galleryTop = new Swiper(".gallery-top", {
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
spaceBetween: 10,
loop:true,
loopedSlides: 50
});
var galleryThumbs = new Swiper(".gallery-thumbs", {
spaceBetween: 10,
slidesPerView: "auto",
touchRatio: 0.2,
loop:true,
slideToClickedSlide: true,
loopedSlides: 50,
direction:'vertical'
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
Codepen Link For Reference
Give this a try.

Categories

Resources