I have been trying to build a typing animation that is trigger for links in view while scrolling. There seems to be an issue with jquery selecting the right element or the setinterval objects being created that cause all the elements to type the same thing regardless of id selected. I have tried a few ways of making the setinterval unique to the element.
var typers = {};
var typeElem = $('.typer');
$.each(typeElem, function() {
var tElem = $(this);
var typeText = tElem.text();
tElem.data('output', typeText);
});
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//console.log(`window height ${window_height}`);
// console.log(`window top ${window_top_position}`);
// console.log(`window bott ${window_bottom_position}`);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
// console.log(element_bottom_position);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
//console.log('add');
} else {
$element.removeClass('in-view');
//console.log('remove');
}
});
var $typeTheseElements = $('a.in-view');
$.each($typeTheseElements, function() {
//console.log(this.length);
var ident = $(this).attr('id');
console.log(ident);
if ($(`#${ident}`).data("typing")) {
/// console.log(`already typing ${ident}`);
} else {
var aText = "http://";
$(`#${ident}`).data("typing", true);
// console.log($element.data('output'));
srcText = $(`#${ident}`).data('output');
// console.log(`Type: ${srcText}`);
var counter = 0;
typers[ident] = setInterval(function() {
if (counter < srcText.length) {
aText = aText + srcText.charAt(counter);
$(`#${ident}`).text(aText);
counter++;
} else {
$(`#${ident}`).data("typing", false);
clearInterval(typers[ident]);
//console.log('done typing')
}
}, 300);
//console.log(srcText);
}
// console.log('type this' );
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
#keyframes siteFocus {
0% {
width: 25%;
}
25% {
width: 50%;
}
50% {
width: 75%;
}
100% {
width: 100%;
}
}
/* The element to apply the animation to */
.sites:hover {
transition: all 3s
}
.sites {
width: 25%;
height: 15px;
padding-top: 10px;
float: left;
text-align: center;
transition: all 3s
}
.sitelinks {
color: black;
text-decoration: none;
}
.siteDescription {
display: none;
}
.intro {
font-size: 26px;
}
.intro-dot {
font-weight: bold;
font-style: normal;
}
/*These styles contain basic styles for fomatting along with our animation css*/
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background: #efefef;
line-height: 170%;
}
strong,
b {
font-weight: 600
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 150%;
}
i.fa {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
margin: 25px auto 25px auto;
position: relative;
}
.container {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
top: 0;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 3000ms linear;
-webkit-transition: all 3000ms linear;
-o-transition: all 3000ms linear;
transition: all 3000ms linear;
-moz-transform: translate3d(-300px, 0px, 0px);
-webkit-transform: translate3d(-300px, 0px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate3d(-300px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.animation-element.imagep.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.typer.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.imagep:nth-child(2) {}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 100%;
margin: 1% 1% 1% 1%;
background: #F5F5F5;
padding: 5px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active {
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 100%;
margin: 1% 1% 1% 1%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 100%;
margin: 1% 1% 1% 1%;
}
.animation-element.slide-left.testimonial .header {
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left {
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right {
float: left;
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating {}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px) {
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 100%;
margin: 0px 0px 0px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating {
text-align: center;
float: none;
}
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
margin-right: 5px;
margin-bottom: 5px;
display: block;
height: 83px;
}
.imagep {
display: block;
position: absolute;
top: 25px;
left: 130px;
width: 100%;
}
.hiddenb {
background: rgb(255, 255, 255);
position: absolute;
top: 20px;
left: 130px;
width: 50px%;
}
.imagepspan {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(255, 255, 255);
/* fallback color */
background: rgba(255, 255, 255, 1);
padding: 2px;
}
.imagepspan a {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
text-decoration: none;
}
p a {
color: black;
text-decoration: none;
}
.spancursor {
animation: blink 1s infinite;
}
#keyframes type {
from {
width: 0;
}
}
#keyframes type2 {
0% {
width: 0;
}
50% {
width: 0;
}
100% {
width: 100;
}
}
#keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script src="public/jquery.min.js" type="text/javascript"></script>
<script src="public/animations.js" type="text/javascript"></script>
</head>
<body>
<div class="main-container">
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test1.ca</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test2.ca
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test3.ac
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test4</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test5</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test6</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test7</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test8</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test9</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test10</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test11</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test12</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test13</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test14</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test15</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test16</span>
<span class="spancursor">|</span></p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
You need to declare the srcText variable in .each() otherwise you are creating a single global variable. each.() iterates though the entire list before your setInterval function is called and so scrText is left with the last value in the iteration.
To fix, add the var to declare a local variable in the function:
var srcText = $(`#${ident}`).data('output');
Related
I am implementing an carousel on click of previous and next the slide changes , this is my code which is working fine the only issue is transition, it is not as smooth as expected. I have attached the working copy of the code.
Can anyone please help why it is not going smooth, what i am missing
Thanks
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
});
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Just add carousel-fade and edit the bootstrap5 css3 directly to get the required effect
for example in your code i added
checkout my video explaining this on my custom bootstrap5 blog theme
https://youtu.be/SZkv2ipRico
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
and added carousel-fade like i showed you before in the
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<style>
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
</style>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
})
</script>
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;
}
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>
In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker
Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.
I've been playing with this code all morning trying to make this slider go 100% of the browser. I am using swiper slider if that helps? I have attached my code below for reference.
If you preview the code in full width view the slider seems to be trapped in the original image size and not going to the edge of the window like the rest of the stories. Any suggestions would be appericated.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
initialSlide: 0,
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false
});
/* Making Thing Pretty
---------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.opencanvascontainer {
margin: 0 auto;
max-width: 1140px;
}
[class*=bit-] {
float: left;/*padding:.3em;*/
position:relative;
}
/* OBSW Grid System
---------------------------- */
.box {
text-align: center;
border: solid 1px black;
color: #000;
font-size: 12px;
font-family: 'proxima_nova_rgregular', sans-serif;
padding: 15px 10px 15px 10px;
}
.bit-1 {
width: 100%;
}
.bit-2 {
width: 50%;
padding: 20px;
}
.bit-3 {
width: 33.33333%;
padding: 20px;
}
.bit-4 {
width: 25%;
}
.bit-4-tabs {
width: 25%;
padding:10px;
}
.bit-5 {
width: 20%;
}
.bit-5-tabs {
width: 20%;
padding:10px;
}
.bit-6 {
width: 16.66667%;
padding: .3em;
}
.bit-7 {
width: 14.28571%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.11111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09091%;
}
.bit-12 {
width: 8.33333%;
}
.bit-25 {
width: 25%;
}
.bit-40 {
width: 40%;
}
.bit-60 {
width: 60%;
}
.bit-75 {
width: 75%;
}
.bit-35 {
width: 35%;
padding: 20px;
}
.bit-65 {
width: 65%;
padding: 20px;
}
/* Laptop */
#media (min-width:50em) and (max-width:68.75em) {
.bit-7 {
width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
width: 50%;
}
}
/* Tablet */
#media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
width: 100%;
}
}
/* Mobile */
#media (max-width:30em) {
.bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-35, .bit-65 {
width: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
.bit-5-tabs, .bit-4-tabs {width:50%;padding:5px;}
.storytext {margin-left:15px;}
.storytextcenter {margin-left:0px;}
.bottomlinespacing {margin-bottom:20px;}
.subtitle {
font-size:20px !important;
margin-top: 1em !important;
}
.fancy span { margin-top:1.5em !important;}
}
/* -------------------------
End OBSW Grid System */
/* Full Width Wrapper
---------------------------- */
.fullwidthwrapper {
width: 100%;
padding-top: 150px;
}
#media (max-width:991px) {
.fullwidthwrapper {
padding-top: 5px;
}
}
#media (max-width:907px) {
.fullwidthwrapper {
padding-top: 5px;
line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */
/* Header Slider
---------------------------- */
.hpfullwidth-top {
background-color: #fff;
background-repeat: repeat;
padding-top: 150px;
}
#media (max-width:991px) {
.hpfullwidth-top {
padding-top: 5px;
}
}
.imageholder {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------
End Header Slider */
/* Image Hover
---------------------------- */
.fade {
opacity: 1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
opacity: 0.5;
}
/* -------------------------
End Image Hover */
.storytext {
margin-top:15px;
line-height:20px;
}
.storytextcenter {
margin-top:15px;
line-height:20px;
}
.firstline {
font-family:proxima_nova_rgbold, serif;
font-size:20px;
color:#000;
}
.secondline {
font-family:'proxima_nova_rgregular', serif;
font-size:14px;
color:#000;
}
.thirdline {
font-family:proxima_nova_rgbold, serif;
font-size:14px;
color:#000;
border-bottom: solid 2px #000000;
display: inline;
padding-bottom: 2px;
}
.bottomlinespacing {
margin-bottom:0px;
}
.subtitle {
margin: 1.5em 0 .3em 0;
font-size:35px;
letter-spacing:5px;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
.tabbedcontainer {
width: 100%;
margin: 0 auto;
}
ul.tabs {
margin-top: 1em;
padding: 0px;
list-style: none;
text-align:center;
}
ul.tabs li {
background: none;
color: #000;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #fff;
color: #000;
text-decoration:underline;
font-family:proxima_nova_rgbold, serif;
font-weight:bold;
}
.tab-content {
display: none;
background: #fff;
}
.tab-content.current {
display: inherit;
}
.swiper-container {
width: 100%;
height: auto;
}
.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;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
position: relative;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
/* Pagination Styles */
.swiper-pagination {
position: relative;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
margin-top: 5px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
margin: 5px;
}
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: black;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: black;
opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
/* Preloader */
.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%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-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%;
-webkit-background-size: 100%;
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% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
<!-- Start Body Content -->
<div class="fullwidthwrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- SLIDE 1 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
</div>
<div class="heightissue" style="height:18px; width:100%;"> </div>
</div>
<div class="swiper-pagination"> </div>
<div class="bit-1">
<div class="bit-3">
<img src="https://s17.postimg.org/lfnazyidb/nike1.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP RUNNING</span><br>
<span class="secondline">Starting at $59.99</span>
<div class="bottomlinespacing"><span class="thirdline">SHOP NOW</span></div>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/b4ay7aqnz/nike2.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP TRAINING</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/qoibxu0sf/nike3.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
<div class="bit-1" style="margin-bottom:40px;">
<p class="subtitle fancy"><span>ATHLETIC<font style="font-family:proxima_nova_rgbold, serif;">REPORT</font>2017</span></p>
<div class="tabbedcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Women's</li>
<li class="tab-link" data-tab="tab-2">Men's</li>
<li class="tab-link" data-tab="tab-3">Girls'</li>
<li class="tab-link" data-tab="tab-4">Boys'</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-4" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Body Content -->
Thanks!
Remove the padding from the class "bit-3".