Menu
Hi,
I have 3 images: 1.png, 2.png, 3.png and i want to create a slideshow with them.
Image 1.png is on the screen, when i click on it to wipe up to down and image 2.png to take its place.
When i click on image 2.png to wipe left to right and image 3.png to take its place.
I found something on github but i am beginner and i dont know how to do it.
Thank you!
is not for a website, i have a personal project[/quote]I see, then touch-friendly is not a must-have for you.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<i> </i><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<i> </i><script src="http://malsup.github.io/jquery.cycle2.js"></script>
<i> </i><script src="http://malsup.github.io/jquery.cycle2.tile.js"></script>
<i> </i><style>
<i> </i> div.cycle-slideshow {
<i> </i> width: 50%;
<i> </i> height: 50%;
<i> </i> }
<i> </i> div.cycle-slideshow img {
<i> </i> width: 100%;
<i> </i> height: auto;
<i> </i> }
<i> </i></style>
</head>
<body>
<!-- tileBlind -->
<div class="cycle-slideshow" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev"
data-cycle-tile-count=1 data-cycle-fx="tileBlind">
<img src="http://malsup.github.io/images/p1.jpg" data-cycle-tile-vertical="true">
<img src="http://malsup.github.io/images/p2.jpg" data-cycle-tile-vertical="false">
<img src="http://malsup.github.io/images/p3.jpg" data-cycle-tile-vertical="true">
</div>
<script>
$('.cycle-slideshow').on('click', function () {
$('.cycle-slideshow').cycle('next');
});
</script>
</body>
</html>
data-cycle-speed
` <div class="cycle-slideshow" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev"
data-cycle-tile-count=1 data-cycle-fx="tileBlind" data-cycle-speed="1000">
<img src="http://malsup.github.io/images/p1.jpg" data-cycle-tile-vertical="true">
<img src="http://malsup.github.io/images/p2.jpg" data-cycle-tile-vertical="false">
<img src="http://malsup.github.io/images/p3.jpg" data-cycle-tile-vertical="true">
</div>
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>sliding around</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
font-size: 1.5em;
color: #555;
text-align: center;
text-transform: capitalize;
}
#slide-container{
position: relative;
max-width: 52%;
padding-top: 39%;
margin: auto;
border: 1px solid #000;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
overflow: hidden;
}
#slide-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: 1s ease-in-out;
cursor: pointer;
}
.move3 {
opacity: 0.6;
transform: translate( 0, -100% );
}
.move2 {
opacity: 0.6;
transform: translate( -100%, 0 );
}
.move1 {
opacity: 0.6;
transform: translate( 100%, 0 );
}
.move0 {
z-index: 1;
opacity: 0.6;
transform: translate( 0, 100% );
}
.top-image {
z-index: -1;
}
</style>
</head>
<body>
<h1>up, left, right and down</h1>
<div id="slide-container">
<img src="http://malsup.github.io/images/p4.jpg" width="1000" height="750" alt="boat">
<img src="http://malsup.github.io/images/p3.jpg" width="1000" height="750" alt="sea">
<img src="http://malsup.github.io/images/p2.jpg" width="1000" height="750" alt="trees">
<img src="http://malsup.github.io/images/p1.jpg" width="1000" height="750" alt="flower">
</div>
<script>
(function( d ) {
'use strict';
var c, pics = d.getElementById( 'slide-container' ).getElementsByTagName( 'img' );
for ( c = 0; c < pics.length; c ++ ) {
pics[c].addEventListener( 'click', slideShow(c), false );
}
function slideShow(c) {
pics[c].onclick = function() {
switch(c) {
case 3:
this.classList.add( 'move3' );
pics[1].classList.remove( 'move1' );
break;
case 2:
this.classList.add( 'move2' );
pics[0].classList.remove( 'move0' );
break;
case 1:
this.classList.add( 'move1' );
pics[3].classList.remove( 'move3' );
pics[3].classList.add( 'top-image' );
break;
case 0:
this.classList.add( 'move0' );
pics[2].classList.remove( 'move2' );
pics[3].classList.remove( 'top-image' );
break;
}
}
}
}( document ));
</script>
</body>
</html><i>
</i>
``
0.1.9 — BETA 4.25