Wipe images onclick

@deplasare1Dec 11.2019

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.
https://jsfiddle.net/6gxhonym/1/

Thank you!

to post a comment

CSS HTML JavaScript

13 Comments(s) _↴

@SempervivumDec 11.2019 — #I'm not sure what you mean exactly when writing "swipe": Moving the image by moving the mouse while clicked or simply click once and the image slides automatically?

There are a lot of ready-to-user slideshows out there, however your requirement that one transition should be swiping vertically and the other horizontally is not that common. Some slideshows enable for transition effects specific to images; I will check if one of those I know about provide this.

Besides this I highly recommend choosing a slideshow that is touch-friendly as many users nowadays are using a mobile device.

@deplasare1authorDec 11.2019 — #@Sempervivum#1611724 i want to put "wipe" effect not "swipe" and is not for a website, i have a personal project. Like here: https://github.com/UseAllFive/wipe

When i left click once on image 1 to wipe up to down. The image 2 is now on screen.

When i left click once on image 2 to wipe left to right. The image 3 is now on screen.

@SempervivumDec 11.2019 — #is not for a website, i have a personal project[/quote]I see, then touch-friendly is not a must-have for you.

I took a look at the slideshows I'm familiar with and the only one that supports image specific transitions is cycle2. However this one provides only a few transition effects where slide horizontally is closest to your requirement but not exactly.

The one you posted, wipe at Github, unfortunately apparently doesn't support neither vertical wiping nor slide specific wiping. I'm afraid it has to be modified a lot in order to meet your requirement.

@deplasare1authorDec 11.2019 — #@Sempervivum#1611726 i found this Plugin http://jquery.malsup.com/cycle/wipe.html

Can you help me?

@SempervivumDec 11.2019 — #That's fine, I focused on the new cycle[b]2[/b] and therefore didn't find this transition. Seems to provide the transition effects you require. However the old cycle plugin doesn't feature slide specific transitions. Maybe the wipe effect can be done by cycle2 either:

https://github.com/malsup/cycle2/issues/738

I will look into this later, as I have some other activities now.

@deplasare1authorDec 11.2019 — #@Sempervivum#1611729 ok, thank you!

@SempervivumDec 11.2019 — #Cycle2 with tile transition works fine. Check if this meets your requirements. Can be beautyfied, e. g. by centering the images.

&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Test&lt;/title&gt;
 
 
 <i>    </i>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
 <i>    </i>&lt;script src="http://malsup.github.io/jquery.cycle2.js"&gt;&lt;/script&gt;
 <i>    </i>&lt;script src="http://malsup.github.io/jquery.cycle2.tile.js"&gt;&lt;/script&gt;
 <i>    </i>&lt;style&gt;
 <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>&lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;!-- tileBlind --&gt;
 &lt;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"&gt;
 &lt;img src="http://malsup.github.io/images/p1.jpg" data-cycle-tile-vertical="true"&gt;
 &lt;img src="http://malsup.github.io/images/p2.jpg" data-cycle-tile-vertical="false"&gt;
 &lt;img src="http://malsup.github.io/images/p3.jpg" data-cycle-tile-vertical="true"&gt;
 &lt;/div&gt;
 &lt;script&gt;
 $('.cycle-slideshow').on('click', function () {
 $('.cycle-slideshow').cycle('next');
 });
 &lt;/script&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@deplasare1authorDec 12.2019 — #@Sempervivum#1611736 thank you very much, i have 2 more things to be perfect:

1) i try to put delay 1 sec, data-cycle-tile-delay=1000 but doesn't work, wipe to be slower.

2) How to control from which side the slide is wiped? For example image 1 i want to be wiped top-to-bottom (t2b) not bottom-to-top like is it now.

@SempervivumDec 12.2019 — #@deplasare1#1611752

1) The speed of the transition can be modified by `data-cycle-speed`, either for the complete slideshow or for an individual slide.

 &lt;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"&gt;
 &lt;img src="http://malsup.github.io/images/p1.jpg" data-cycle-tile-vertical="true"&gt;
 &lt;img src="http://malsup.github.io/images/p2.jpg" data-cycle-tile-vertical="false"&gt;
 &lt;img src="http://malsup.github.io/images/p3.jpg" data-cycle-tile-vertical="true"&gt;
 &lt;/div&gt;

2) I'm afraid that there is no such option for the tiles plugin of Cycle2. There is for the wipe tranisition of the old Cycle but unfortunately for that version the transition effect cannot be configured for each slide individually.

@deplasare1authorDec 12.2019 — #@Sempervivum#1611755 ok, i go with cycle 1 then, last time i bother you. How i make this clickable?

http://jsfiddle.net/L4coe9qy/

In this example the wipe is good (l2r) when i press "Prev" but in backwards order.

https://www.jqueryscript.net/demo/Basic-jQuery-Content-Slideshow-with-CSS3-Transitions-Wipe/

@SempervivumDec 12.2019 — #Clickable:

http://jsfiddle.net/Sempervivum/ym46p0tg/12/

@deplasare1authorDec 12.2019 — #@Sempervivum#1611760 Thank you, problem solved!

@cootheadDec 12.2019 — #Hi there deplasare1,

although your problem is resolved, you might still

be interested in this "_Vanilla JavaScript_" example...

``<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
 
 &lt;title&gt;sliding around&lt;/title&gt;
 
 &lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;
 
 &lt;style media="screen"&gt;
 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;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt; 
 
 &lt;h1&gt;up, left, right and down&lt;/h1&gt;
 
 &lt;div id="slide-container"&gt;
 &lt;img src="http://malsup.github.io/images/p4.jpg" width="1000" height="750" alt="boat"&gt;
 &lt;img src="http://malsup.github.io/images/p3.jpg" width="1000" height="750" alt="sea"&gt;
 &lt;img src="http://malsup.github.io/images/p2.jpg" width="1000" height="750" alt="trees"&gt;
 &lt;img src="http://malsup.github.io/images/p1.jpg" width="1000" height="750" alt="flower"&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 (function( d ) {
 'use strict';
 var c, pics = d.getElementById( 'slide-container' ).getElementsByTagName( 'img' ); 
 for ( c = 0; c &lt; 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 ));
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

You can also view the example here...

https://codepen.io/coothead/full/yLyJpeG

_coothead_

Also in #CSS _↴

3 equal columns in dimensions, but not on display Need help redefining the <p> tag - how do I stop it from starting one line below?Padding/Margin Issue

Success!

Help @deplasare1 spread the word by sharing this article on Twitter...

Tweet This

Wipe images onclick

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Wipe images onclick

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴