How To create "coverflow" Swiper using swiper JS - html

I am facing an issue with "coverflow" Swiper slider. I want to show only 3 images at a time in the slider but I'm unable to achieve that.
expected output video:
https://gofile.io/d/pl2AQI
Here is screenshot how it should be:
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 1,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
centeredSlides: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
coverflow: {
rotate: 0,
stretch: 150,
depth: 200,
modifier: 1,
slideShadows: false,
},
});
.swiper-pagination-bullet {
border: 1px solid #1da1f2;
}
.swiper-pagination-bullet-active {
background: #1da1f2
}
img:not([draggable]),
embed,
object,
video {
max-width: 100%;
height: auto;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-container-multirow>.swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.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.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev,
.swiper-container-rtl .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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
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'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
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'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
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'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px
}
.swiper-pagination-progress {
background: rgba(0, 0, 0, .25);
position: absolute
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-vertical>.swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-progress.swiper-pagination-white {
background: rgba(255, 255, 255, .5)
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000
}
.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
-ms-perspective: 1200px
}
.swiper-container-cube,
.swiper-container-flip {
overflow: visible
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
#-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}
#keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.swiper-container.one {
padding-top: 40px;
text-align: center;
}
.swiper-container.one .swiper-slide {
padding: 0 43px;
}
.swiper-container {
width: 100%;
padding-bottom: 60px;
}
.slider-image {
width: 200px;
height: 200px;
}
.swiper-slide img {
display: block;
margin: auto;
width: 100%;
height: 100%;
border-radius: 100%;
}
.swiper-slide {
height: auto;
padding: 0 15px;
}
.two .swiper-slide {
width: 300px;
}
.swiper-slide img {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.swiper-slide .slider-image .preview-icon {
z-index: -1;
width: calc(100% - 30px);
}
.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 1;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
.swiper-pagination-bullet {
background: transparent none repeat scroll 0 0;
border: 1px solid #ee0f6f;
border-radius: 10px;
display: inline-block;
height: 10px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 26px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.swiper-pagination-bullet-active {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
border: medium none;
height: 12px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 12px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<div class="swiper-container two">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" alt="slide 1">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 2">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" alt="slide 3">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" alt="slide 4">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 5">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 5">
</div>
</div>
<!-- Add Pagination -->
</div>
<div class="swiper-pagination"></div>
</div>
Note: any custom code also welcome or any other plugin also works


By using slidesPerView: 2 and then hidding the slides with opacity:0 except for the 3 you want to see, you can achieve what you want.
.swiper-slide{
opacity: 0;
}
.swiper-slide-prev,
.swiper-slide-active,
.swiper-slide-next{
opacity: 1;
}
And if you want to have more space between the elements, you can mess around with stretch: 150 and depth: 200.
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 2,
initialSlide: 1,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
centeredSlides: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
coverflow: {
rotate: 0,
stretch: 150,
depth: 200,
modifier: 1,
slideShadows: false,
},
});
.swiper-pagination-bullet {
border: 1px solid #1da1f2;
}
.swiper-pagination-bullet-active {
background: #1da1f2
}
img:not([draggable]),
embed,
object,
video {
max-width: 100%;
height: auto;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-container-multirow>.swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.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.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev,
.swiper-container-rtl .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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
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'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
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'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
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'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px
}
.swiper-pagination-progress {
background: rgba(0, 0, 0, .25);
position: absolute
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-vertical>.swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-progress.swiper-pagination-white {
background: rgba(255, 255, 255, .5)
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000
}
.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
-ms-perspective: 1200px
}
.swiper-container-cube,
.swiper-container-flip {
overflow: visible
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
#-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}
#keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.swiper-container.one {
padding-top: 40px;
text-align: center;
}
.swiper-container.one .swiper-slide {
padding: 0 43px;
}
.swiper-container {
width: 100%;
padding-bottom: 60px;
}
.slider-image {
width: 200px;
height: 200px;
}
.swiper-slide img {
display: block;
margin: auto;
width: 100%;
height: 100%;
border-radius: 100%;
}
.swiper-slide {
height: auto;
padding: 0 15px;
}
.two .swiper-slide {
width: 300px;
}
.swiper-slide img {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.swiper-slide .slider-image .preview-icon {
z-index: -1;
width: calc(100% - 30px);
}
.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
z-index: 1;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
.swiper-pagination-bullet {
background: transparent none repeat scroll 0 0;
border: 1px solid #ee0f6f;
border-radius: 10px;
display: inline-block;
height: 10px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 26px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.swiper-pagination-bullet-active {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
border: medium none;
height: 12px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 12px;
}
.swiper-slide{
opacity: 0;
}
.swiper-slide-prev,
.swiper-slide-active,
.swiper-slide-next{
opacity: 1;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<div class="swiper-container two">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" alt="slide 1">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 2">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" alt="slide 3">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" alt="slide 4">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 5">
</div>
</div>
<div class="swiper-slide">
<div class="slider-image">
<img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" alt="slide 5">
</div>
</div>
<!-- Add Pagination -->
</div>
<div class="swiper-pagination"></div>
</div>

Related

How to add Shining Effect to a text in CSS?

So I was trying to create a shining effect using CSS on a text but I am failing to do so.
Can anyone help me overcome this problem pls? Help would be highly appreciated.
https://codepen.io/TiagoLopes/pen/vZBMWB
I was trying to mimic this effect but on a text rather than an image...
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(31, 30, 30, 0.616);
width: 100px;
height: 20px;
overflow: hidden;
}
.block h3 {
overflow: hidden;
width: 100px;
margin: 10px auto;
margin-top: 10px;
height: 28px;
object-fit: cover;
box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
display: block;
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-top: -10px;
}
.block:hover h3 {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}
.block .glow-wrap {
overflow: hidden;
position: absolute;
width: 85%;
height: 180%;
top: 4px;
margin-top: -15px;
}
.block .glow {
display: block;
position: absolute;
width: 19%;
height: 477%;
background: rgb(255, 255, 255);
top: -9px;
overflow: hidden;
filter: blur(5px);
transform: rotate(45deg) translate(-450%, 0);
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block:hover .glow {
transform: rotate(45deg) translate(450%, 0);
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block:hover .glow-wrap {
margin-top: 5px;
}
<body>
<div class="block">
<h3 id="author">ZETHYST</h3>
<div class="glow-wrap">
<i class="glow"></i>
</div>
</div>
</body>

css and html problem "How I can add a close tab In my design"

I was working on a custom design On WordPress website ,
But I'm stuck in a problem and I don't know how to solve it.
The end result is supposed to be like this :
result
but I am getting this result In my end :
img
The problem is that the closing (x) does not appear.
code :
/* Pop Up Animation Ramadan */
#keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
to {
transform: perspective(400px)
}
}
#keyframes change_color {
0% {
background: #5ac7da
}
33.33% {
background: #3173bd
}
66.66% {
background: #0d4a8d
}
100% {
background: #5ac7da
}
}
#keyframes run_hari18 {
0% {
transform: translate(0%, 0);
opacity: 0
}
50% {
transform: translate(100%, 0);
opacity: 1
}
100% {
transform: translate(100%, 0);
opacity: 0
}
}
#keyframes sun_movement {
0% {
top: 50px
}
100% {
top: 50px
}
}
#keyframes run_malam18 {
0% {
transform: translate(-20%, 0);
opacity: 0
}
49.99% {
transform: translate(0%, 0);
opacity: 1
}
99.99% {
transform: translate(20%, 0);
opacity: 0
}
100% {
transform: translate(-20%, 0);
opacity: 1
}
}
#keyframes moon_movement {
0% {
transform: translate(-200%, 0);
opacity: 0
}
49.99% {
transform: translate(0%, 0);
opacity: 1
}
99.99% {
transform: translate(200%, 0);
opacity: 0
}
100% {
transform: translate(-200%, 0);
opacity: 1
}
}
/*custom*/
#arlinapuasa2018 {
display: block;
background: #fff;
position: fixed;
top: 25%;
right: 0;
left: 0;
margin: auto;
text-align: center;
max-width: 660px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.1), 0 15px 12px rgba(0, 0, 0, 0.12);
z-index: 99;
min-height: 350px;
padding: 20px;
overflow: hidden;
border-radius: 10px;
animation: change_color 7s infinite linear, flipInX 1s linear
}
#arlinapuasa2018 .puasa18 {
position: absolute;
color: #fff;
font-size: 2rem;
font-weight: 400;
padding: 30px;
z-index: 99999;
text-align: center;
margin: auto;
left: 0;
right: 0;
top: 20%
}
#arlinapuasa2018 .puasa18 p {
margin: 20px auto 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2)
}
#arlinapuasa2018 .puasa18 .ramadan2018 {
font-size: 3rem;
font-weight: 700
}
#arlinapuasa2018 a.close-popup {
position: absolute;
bottom: 1px;
right: 1px;
color: #fff;
text-align: center;
border-radius: 100%;
cursor: pointer;
z-index: 999999;
transition: all .3s
}
#arlinapuasa2018 a.close-popup:hover {
color: #fff
}
#arlinapuasa2018 a.close-popup:active {
opacity: 0
}
#arlinapuasa2018 a.close-popup i {
font-family: fontawesome;
font-size: 20px;
font-weight: normal;
font-style: normal;
transform: rotate(270deg);
transition: all .3s
}
#arlinapuasa2018 a.close-popup:hover i {
transform: rotate(360deg)
}
.gunung18 {
width: 400px;
height: 300px;
display: block;
background: #4aad52;
position: absolute;
bottom: -150px;
transform: rotate(45deg);
border-radius: 50px;
z-index: 2;
left: 0;
}
.gunung18.behind {
background: #42a54a;
right: -120px;
bottom: -180px;
z-index: 1
}
.hari18 {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
animation: run_hari18 7s infinite linear
}
.hari18 .awan18 {
margin: 30px auto;
width: 150px;
height: 70px;
display: block;
background: #e7e7e7;
border-radius: 35px;
border: 10px solid #ffffff;
box-shadow: inset 0 -7px 0 0 #d7d7d7;
position: absolute;
top: 90px;
left: 50px
}
.hari18 .awan18:before {
content: ''', ''';
width: 65px;
height: 35px;
display: block;
background: #e7e7e7;
border-radius: 35px 35px 0 0;
border: 10px solid #ffffff;
border-bottom: 0;
position: absolute;
top: -35px;
left: 20px
}
.hari18 .awan18.invert {
top: 60px;
left: 250px
}
.hari18 .awan18.invert:before {
left: 50px
}
.hari18 .sun {
width: 75px;
height: 75px;
display: block;
background: #fff297;
border-radius: 50%;
box-shadow: inset -5px -5px 0 0 #ddc991;
position: absolute;
top: 50px;
left: 0;
animation: sun_movement 7s infinite linear
}
.malam18 {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
animation: run_malam18 7s infinite linear
}
.malam18 .bintang18 .star {
width: 5px;
height: 5px;
display: block;
background: #f7f7f7;
border-radius: 50%;
position: absolute
}
.malam18 .bintang18 .star:nth-child(1) {
top: 50px;
left: 50px
}
.malam18 .bintang18 .star:nth-child(2) {
top: 200px;
left: 70px
}
.malam18 .bintang18 .star:nth-child(3) {
top: 100px;
left: 300px
}
.malam18 .bintang18 .star:nth-child(4) {
top: 50px;
left: 220px
}
.malam18 .bintang18 .star:nth-child(5) {
top: 160px;
left: 320px
}
.malam18 .bintang18 .star:nth-child(6) {
top: 150px;
left: 230px
}
.malam18 .bintang18 .star:nth-child(7) {
top: 180px;
left: 400px
}
.malam18 .bintang18 .star:nth-child(8) {
top: 50px;
left: 360px
}
.malam18 .moon {
width: 75px;
height: 75px;
display: block;
background: #d7d7d7;
border-radius: 50%;
box-shadow: inset -5px -5px 0 0 #c7c7c7;
position: absolute;
top: 50px;
left: 100px;
animation: moon_movement 7s infinite linear
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="css.css">
<!-- Start Ramdan -->
<div id='arlinapuasa2018'>
<div class="overflow-hid">
<div class='puasa18'>
<p>كل عام والأمة الأسلامية بخير</p>
<p><span class='ramadan2018'>رمضان كريم</span></p>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<div class='awan18'></div>
<div class='awan18 invert'></div>
<div class='sun'></div>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='moon'></div>
</div>
</div>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
</div>
<!-- End Ramdan -->
<!-- ramdan js -->
<script type='text/javascript'>
//<![CDATA[
// Ramadan
jQuery(function($) {
$(window).bind("load",function(){
$("#arlinapuasa2018").animate({top:"15%"},1e3),
$("a.close-popup").click(function(){
return $(this).parent().fadeOut(2e3),!2;
})
});
});
</script>
I hope someone here can help me with that .
I just want to be able to cloes tap In this design

You can add
$("#close-popup").click(function() {
$("#arlinapuasa2018").remove();
})
to your code.
and if you don't see the X check if your fontawesome tag works or just replace:
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>`
with
<a class='close-popup' href='#' title='close'>X</a>`
Or add z-index: 1000; on #close-popup to put in the foreground.

I have a nice image hover effect on desktop, but it gets stuck on hovered in mobile (Codepen included)

https://codepen.io/DubCoder/pen/poEQJap I really like this hover effect on desktop, but when I show my friends my site on mobile, they touch the image, and it enlarges/colorizes, but then it stays in that state, even after they touch it again. It only goes back to it's original black and white state after they scroll away from it.
I would like the photo to toggle between the two states each time you touch it on mobile. I'm not sure how to go about this. I'm sure there's a way to use media queries or JS to recognise when the user is on a mobile, and add/remove the colored state on click.
I think the fact there's pseudo-classes involved may make it trickier.
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item:hover {
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>

Consider making it focusable. It won't be a toggle by pressing just it, but it will still act natural as to what the user would expect and will be much easier to add.
You can do it by adding tabindex="0" to .item in the HTML markup. Then replace the two lines:
.item:hover {
.item:hover .polaroid:before {
with
.item:hover, .item:focus {
.item:hover .polaroid:before, .item:focus .polaroid:before {
This will apply the effect when it's focused too. You might want to add
outline: none
Inside the .item:hover, .item:focus class to remove the black outline on focus.
Your final results might be:
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item:hover, .item:focus {
outline: none;
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before, .item:focus .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item" tabindex="0">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>
If you want a toggle, you'll need to use JS. I'm simply adding and removing a active class from the element on click and then using it in place of an event.
I removed the hover effect so you can see it better on PC.
function toggleClass(ele, className) {
if (ele.classList.contains(className)) {
ele.classList.remove(className);
} else {
ele.classList.add(className);
}
}
body {
background-color: beige
}
.item {
width: 50%;
position: relative;
left: 5rem;
top: 2rem;
filter: grayscale(100%);
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
}
.polaroid>img {
max-width: 100%;
height: auto;
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item .polaroid:before {
height: 20%;
width: 47%;
bottom: 0px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}
.item.active {
outline: none;
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item.active .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 75%;
bottom: 0%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
<div class="item" onclick="toggleClass(this, 'active')">
<div class="polaroid">
<img src="https://i.imgur.com/5YVg9Ru.jpg" />
</div>
</div>

Rotate image from front view to left view with 3D effect

I am using the code below to rotate the image, but I can only achieve to rotate the image from front view to bottom view. I want to rotate the image from front view to left view. How can I achieve this?
body {
height: 100vh;
margin: 0;
}
.thumb {
width: 600px;
height: 400px;
perspective: 1000px;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateX(80deg);
transform-origin: bottom;
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 36px;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
</div>

Modify rotateX to rotateY since left view makes use of the vertical axis.
Modify the transform-origin to left as we are transforming with the left side as the rotating point.
Apply the similar changes to the pseudo elements for the 3D look as mentioned by #kaiido. I have commented the changes made.
body {
height: 100vh;
margin: 0;
}
.thumb {
width: 600px;
height: 400px;
perspective: 1000px;
margin: 100px; /* For snippet spacing */
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateY(45deg); /* 1 - From rotateX */
transform-origin: left; /* 2 - From bottom */
}
.thumb a:after {
content: '';
position: absolute;
left: 0px;
bottom: 0;
width: 36px; /* Interchanged width and height because horizontal transformation is now vertical transformation */
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateY(90deg); /* 1 - From rotateX */
transform-origin: left; /* 2 - From bottom */
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateY(15deg) translateZ(-40px) scale(0.75); /* 3 - From rotateX */
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateY(0) translateZ(-60px) scale(0.85); /* 3 - From rotateX */
}
<div class="thumb">
</div>

#manoj-kumar is right.
make use of rotateX to rotateY
also you have to set transform-origin and position for the :after to make it wrap on left
fiddle : https://jsfiddle.net/hellooutlook/6sagLtpk/2/
body {
height: 100vh;
margin: 0;
}
.thumb {
margin: 100px;
width: 600px;
height: 400px;
perspective: 1000px;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateY(60deg);
/* From rotateX */
transform-origin: left;
/* From bottom */
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateY(110deg);
transform-origin: left;
/* extra */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(15deg) translateZ(-40px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
</div>

<a> element styled button is scrolling down my web page

I've been trying to force my button to not scroll down/up to the linked element and just produce the button's animation without any success!
I've tried the jquery's preventDefault(among many other things) but this would not let the animation to actually work
Here is the code
Code in codepen
html,
body {
height: 120%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
/*Buttons style; button_input is for the sepcial inputs*/
.button {
top-margin: 1rem;
}
.button_input {
width: 140px;
}
.male>span {
right: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.female>span {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.bg {
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
}
.bg2 {
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;
}
.bg::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg {
background-color: rgba(255, 255, 255, 0.3)
}
.bg:target {
animation: push 1s ease-out;
transition: all 1s linear;
}
#male:target {
background-color: #003D79;
}
#female:target {
background-color: #003D79;
}
.bg:target::before,
.bg:target::after {
animation: wave 1s ease-in-out;
}
.bg:target::before {
animation-delay: 0.2s;
}
.bg:target::after {
animation-delay: 0.3s;
}
.bg2::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg2 {
background-color: rgba(255, 255, 255, 0.3)
}
.bg2:target {
animation: push 1s ease-out;
transition: all 1s linear;
}
.bg2:target::before,
.bg2:target::after {
animation: waves 1s ease-in-out;
}
.bg2:target::before {
animation-delay: 0.2s;
}
.bg2:target::after {
animation-delay: 0.3s;
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' class="genders">
<a class="button male" href="#male">
<span class="bg" id="male"></span>
<span class="symbol"></span>
</a>
<a class="button female" href="#female">
<span class="bg2" id="female"></span>
<span class="icon"></span>
</a>
</td>
</tr>
</table>

This scrolling behavior is baked into the :target pseudo selector, since the browser's default is to scroll the targeted id to the top of the window.
Using jQuery's toggleClass method would be a pretty simple solution. However, if you want to use pure CSS there are a couple workarounds. One is to place an absolutely positioned element and add the id for the element you're targeting to it.
A second option is to use the checkbox hack, where you use styled labels for a hidden checkbox instead.
Hope this helps!
html,
body {
height: 100%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
table {
margin: 0 auto;
}
/*Buttons style; button_input is for the sepcial inputs*/
.button {
margin-top: 1rem;
}
.button_input {
width: 140px;
}
.male>span {
right: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;
}
.bg::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg {
background-color: rgba(255, 255, 255, 0.3)
}
.bg2::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg2 {
background-color: rgba(255, 255, 255, 0.3)
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
//checkbox hack
#toggle-male,
#toggle-female {
opacity: 0;
}
input[type=checkbox] {
opacity: 0;
}
label {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
cursor: pointer;
}
/* toggled state */
/* male animation */
#toggle-male:checked~.bg {
animation: push 1s ease-out;
transition: all 1s linear;
background-color: #003D79;
}
#toggle-male:checked~.bg::before,
#toggle-male:checked~.bg::after {
animation: waves 1s ease-in-out;
}
#toggle-male:checked~.bg::before {
animation-delay: 0.2s;
}
#toggle-male:checked~.bg1::after {
animation-delay: 0.3s;
}
/* female animations */
#toggle-female:checked~.bg2 {
animation: push 1s ease-out;
transition: all 1s linear;
background-color: #003D79;
}
#toggle-female:checked~.bg2::before,
#toggle-female:checked~.bg2::after {
animation: waves 1s ease-in-out;
}
#toggle-female:checked~.bg2::before {
animation-delay: 0.2s;
}
#toggle-female:checked~.bg2::after {
animation-delay: 0.3s;
}
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' width="100px" class="genders">
<a class="button male" id="male">
<input type="checkbox" id="toggle-male">
<label for="toggle-male" class="bg"></label>
</a>
</td>
<td align='center' width="100px" class="genders">
<a class="button female" id="female">
<input type="checkbox" id="toggle-female">
<label for="toggle-female" class="bg2"></label>
</a>
</td>
</tr>
</table>
Edit:
Here's an example with jQuery:
$(document).ready(function() {
$('.bgs').on('click', function() {
$(this).toggleClass('animate background').toggleClass('animateAft');
if ($('.bgs').hasClass('animate background' || 'animateAft')) {
$('.bgs').not(this).removeClass('animate background').removeClass('animateAft');
}
})
});
html,
body {
height: 100%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
table {
margin: 0 auto;
}
.button {
margin-top: 1rem;
}
.button_input {
width: 140px;
}
.icon {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;a
}
.bgs {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
cursor: pointer;
}
.bg:after,
.bg2:after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.animate {
animation: push 1s ease-out;
}
.background {
transition: background .4s ease;
background-color: #003D79;
}
.bg.animateAft:after,
.bg2.animateAft:after {
animation: waves 1s ease-in-out;
}
.bg.animateAft:before,
bg2.animateAft:before {
animation-delay: 0.2s;
}
.bg.animateAft:after,
.bg2.animateAft:after {
animation-delay: 0.3s;
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' width="100px" class="genders">
<a class="button male" id="male">
<span id="toggle-male" class="bgs bg"></span>
</a>
</td>
<td align='center' width="100px" class="genders">
<a class="button female" id="female">
<span id="toggle-female" class="bgs bg2"></span>
</a>
</td>
</tr>
</table>

I sometimes fix this, by adding an invisible div, upper from your real target... and then target <a> to that invis div:
Like this:
<div id="BUBU" style="position: absolute; margin-top: -100px; display: none;"></div>
...
<span class="REAL-TARGET"></span>