UPDATE: Updated the code and added a better example to clearify what I want to achieve.
I have built a slider with jQuery.
I give each element the class .active which displays the hidden elements.
Now I want a swipe animation, so that the images come from left to right.
The problem is that I already have a complex code and I don't know how to achieve that.
Here is an example what I want to achieve: https://bootsnipp.com/snippets/Padax
Here is the code
https://codepen.io/Insane415/pen/NggLxe
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
<img src="http://via.placeholder.com/350x150" class="active-thumbnail">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="col-md-6 center-me" style="height:100%;">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h2>Giant Heading 1</h2>
<p>Just some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 2</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 3</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 4</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
</div>
</div>
</div>
.text-holder .text p{margin: 0!important;}
.slider{
padding: 15px;
margin-top: 50px;
background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
background-repeat: no-repeat!important;
background-size: cover!important;
display: inline-block;
width: 100%;
border: 1px solid #ddd;
}
.slider .bullet-points a{
color: #ccc;
}
.thumbnails{
height: 195.11px;
margin-left: -25px;
}
.thumbnails img{
display:block;
max-height: 31.65%;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder{
margin-left: 0px;
height: 100%;
}
.text-holder .text{
display: none;
}
/*display active image*/
.active{
display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
margin-top: 15px;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.active-bullet{
color: #E22C26!important;
}
/*.image-holder{
max-width: 350px!important;
}
.image-holder img{
max-width: 350px!important;
}*/
.image-holder img{
/* text-align: center!important; */
margin: 0 auto;
}
.bullet-points a:hover{
color: #E22C26!important;
}
.center-me{
margin-top: 4%;
}
.text-holder a{
margin-top: 15px;
padding: 10px 20px 10px 20px;
}
.text-holder a:hover{
padding:10px 20px 10px 20px;
}
.text-holder{
font-size: 130%;
color: inherit;
}
.text-holder h2{
font-size: 200%;
}
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
You can do something like this using using CSS3,
Give each image an absolute position and give each image a width & height value.
Set the image container height so your slider pager sit below the images.
I use both #keyframes and transition to demonstrate how you can achieve the effect.
And in your javascript slider function, I added a function to add and remove the transition.
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
/*how I could allign the images in one row*/
.image-holder {
display: inline-block;
width: 100%;
height: 220px;
}
.image-holder img {
display: block;
width: 200px;
height: 200px;
margin: 0;
opacity: 0;
top: 0;
left: 100%;
transition: left ease 1s;
position: absolute;
}
.image-holder img.transition {
animation: moveSlider ease 2s;
opacity: 1;
}
#keyframes moveSlider {
0% {
left: 50%;
}
50% {
left: -100%;
}
100% {
opacity: 0;
left: 100%;
}
}
.image-holder img.active {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
/*END image row allignment*/
.text-holder p{margin: 0;}
.slider{
padding:15px;
margin-top: 50px;
/*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 100%;
}
.thumbnails {
height: 100%;
}
.thumbnails img {
width: 100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder .text {
display: none;
}
.text-holder .text.active {
display: block;
}
/*display active image*/
.active {
}
.active-bullet{
color: #E22C26!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.bullet-points a:hover{
color: #E22C26!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-1">
<div class="thumbnails">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
</div>
<div class="col-md-7">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h1>Giant Heading 1</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 2</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 3</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 4</h1>
<p>Some more text</p>
</div>
</div>
</div>
</div>
</div>
Related
So i took this code off of w3schools to try and learn how to build a carousel from scratch and adapted IT to my own project but i've run into a problem where it won't show the first slide by default when the page loads. the carousel works fine otherwise once you click on the balls(dots?) meant to control it.
DEFAULT SLIDE NOT SHOWING
here is the html, css and javascript code..
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="/assets/imgs/fifa23.jpg" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/starocean23.webp" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/GOWcontroller.jpg" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/gothamKnights23.jpg" style="width:100%">
<div class="text">Releases on October 21st!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/plagueTale23.jpg" style="width:100%">
<div class="text">Releases on October 18th!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls" onclick="currentSlide(1)"></span>
<span class="balls" onclick="currentSlide(2)"></span>
<span class="balls" onclick="currentSlide(3)"></span>
<span class="balls" onclick="currentSlide(4)"></span>
<span class="balls" onclick="currentSlide(5)"></span>
</div>
Any help is greatly appreciated!
NOTE: i have a display: none; line in CSS meant to stop all the slides from showing up at once, if i remove it they stack up on the page so i don't think that's the problem.
Tried changing the loops to see if i had typed something wrong but it didn't work
If you are using an external JavaScript file then you can call the function by adding event listeners in the JavaScript file.
Otherwise, you need to create tag and write the whole javascript code. Then it will work.
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
[...balls].forEach((element, index) => {
element.addEventListener("click", () => currentSlide(index + 1))
})
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (let i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGljfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="https://i.pinimg.com/736x/f7/75/7d/f7757d5977c6ade5ba352ec583fe8e40.jpg" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls"></span>
<span class="balls"></span>
<span class="balls"></span>
</div>
I came across this website's work page and would like to recreate the xray effect of each of the card element.
Here's my code for the xray effect: https://codepen.io/carljustineoyales/pen/yLMEVYd
HTML
<section class="banner">
<h1>this is a banner page</h1>
</section>
<section class="projects" id="projects">
<div class="cardlist" >
<div class="cardlist__grid" >
<div class="card" id="card" onmouseover="setSize()" onmouseout="resetSize()">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card" id="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
<div class="cardlist--skeleton" id="skeleton">
<div class="cardlist--skeleton--bg"></div>
<div class="cardlist__grid">
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
</section>
</body>
SCSS
* {
margin: 0;
padding: 0;
}
.banner {
height: 100vh;
}
.projects {
max-width: 1440px;
width: 100%;
margin: 100px auto;
// padding: 100px 0;
position: relative;
}
.cardlist {
width: 100%;
color: #000;
&__grid {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&--skeleton {
--x: 0;
--y: 0;
--size: 0px;
clip-path: circle(var(--size) at var(--x) var(--y));
user-select: none;
pointer-events: none;
// clip-path: circle(100px at 0 0);
// clip-path: circle(300px at 0% 0%);
transition: clip-path 0.1s ease;
&--bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #838383;
z-index: -1;
}
width: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 1;
background-color: #838383;
}
}
.card {
padding: 50px;
&__thumbnail {
width: 500px;
height: 644px;
background-color: #838383;
&--black {
background-color: #000;
}
}
}
JS
let mouseX=0
let mouseY=0
let size = 0;
const projects = document.querySelector('#projects');
function setSize() {
size = 200
skeleton.style.setProperty('--size', size + "px");
}
function resetSize() {
size = 0
skeleton.style.setProperty('--size', size + "px");
}
function updateCoordinates(event) {
mouseX = event.pageX - projects.offsetLeft ;
mouseY = event.pageY - projects.offsetTop ;
skeleton.style.setProperty('--x', mouseX + "px");
skeleton.style.setProperty('--y', mouseY+ "px");
}
The problem is that I can't seem to find a solution for the updating cursor position while scrolling, also the hover animation became laggy when you open the console. Is there a way to update the cursor position on scroll and why the animation became laggy when the console is open.
I'm trying to make an image gallery with HTML, CSS and JS. The CSS works but there is a problem with the JS. I've made it so you can either click on an image or click on a button to see all of the images in order. But if I click on the third or fourth image and click the L button (stands for LEFT) it jumps from that image to the first image. For some reason it just doesn't want to show the second image.
I've been trying to fix this for hours and it still doesn't work as it should.
var num = 0;
function elementID(indexes) {
var index = $(".images").index(indexes);
var num = index;
}
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
}
function right() {
if (num >= document.getElementsByClassName('images').length - 1) {
num = document.getElementsByClassName('images').length - 1;
} else {
num++;
}
var expandImg2 = document.getElementById("expandedImg");
var image = document.getElementsByClassName('images')[num];
expandImg2.src = image.src;
}
function left() {
if (num <= 0) {
num++;
return false;
} else {
num--;
}
var expandImg2 = document.getElementById("expandedImg");
var image = document.getElementsByClassName('images')[num];
expandImg2.src = image.src;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
Try this solution using the next() and prev() from jQuery.
var currentEl; // track current el
$(document).ready(() => {
$('.column').on('click', function() { // bind clicks
currentEl = this;
addImage($(this).find('img'));
});
$('.closebtn').on('click', function() { // bind clicks to close button
currentEl = undefined; // either you can do this to reset the flow, or comment to maintain the flow
});
});
function addImage(img) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = img[0].src;
expandImg.parentElement.style.display = "block";
}
function right() { // jump to next
var next = currentEl ? $(currentEl).next() : $('.column').first();
if (next.length > 0) {
addImage($(next).find('img'));
currentEl = next;
}
}
function left() { // jump to prev
var prev = currentEl ? $(currentEl).prev() : $('.column').first();
if (prev.length > 0) {
addImage($(prev).find('img'));
currentEl = prev;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.
I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');
Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});